vue基础之使用get、post、jsonp实现交互

vue基础之使用get、post、jsonp实现交互功能示例

、如果vue想做交互，引入: vue-resouce

二、get方式

1、get获取一个普通文本数据:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 </style>
 <script src="vue.js"></script>
 <script src="vue-resource.js"></script>
 <script>
 window.onload=function(){
 new Vue({
 el:'body',
 data:{
 },
 methods:{
 get:function(){
 this.$http.get('a.txt').then(function(res){
 alert(res.status);//成功
 alert(res.data);
 },function(res){
 alert(res.status);//失败返回
 alert(res.data);
 });
 }
 }
 });
 };
 </script>
</head>
<body>
 <input type="button" value="按钮" @click="get()">
</body>
</html>

2、get给服务发送数据:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 </style>
 <script src="vue.js"></script>
 <script src="vue-resource.js"></script>
 <script>
 window.onload=function(){
 new Vue({
 el:'body',
 data:{
 },
 methods:{
 get:function(){
 this.$http.get('get.php',{
 a:1,
 b:2
 }).then(function(res){
 alert(res.data);
 },function(res){
 alert(res.status);
 });
 }
 }
 });
 };
 </script>
</head>
<body>
 <input type="button" value="按钮" @click="get()">
</body>
</html>

三、post方式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 </style>
 <script src="vue.js"></script>
 <script src="vue-resource.js"></script>
 <script>
 window.onload=function(){
 new Vue({
 el:'body',
 data:{
 },
 methods:{
 get:function(){
 this.$http.post('post.php',{
 a:1,
 b:20
 },{
 emulateJSON:true
 }).then(function(res){
 alert(res.data);
 },function(res){
 alert(res.status);
 });
 }
 }
 });
 };
 </script>
</head>
<body>
 <input type="button" value="按钮" @click="get()">
</body>
</html>

四、jsonp方式

获取百度接口

查看响应数据

jsonp请求百度接口

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 </style>
 <script src="vue.js"></script>
 <script src="vue-resource.js"></script>
 <script>
 window.onload=function(){
 new Vue({
 el:'body',
 data:{
 },
 methods:{
 get:function(){
 this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
 wd:'a'
 },{
 jsonp:'cb'//回调函数名称
 }).then(function(res){
 alert(res.data.s);
 },function(res){
 alert(res.status);
 });
 }
 }
 });
 };
 </script>
</head>
<body>
 <input type="button" value="按钮" @click="get()">
</body>
</html>

jsonp请求360接口

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 </style>
 <script src="vue.js"></script>
 <script src="vue-resource.js"></script>
 <script>
 window.onload=function(){
 new Vue({
 el:'body',
 data:{
 },
 methods:{
 get:function(){
 this.$http.jsonp('https://sug.so.360.cn/suggest',{
 word:'a'
 }).then(function(res){
 alert(res.data.s);
 },function(res){
 alert(res.status);
 });
 }
 }
 });
 };
 </script>
</head>
<body>
 <input type="button" value="按钮" @click="get()">
</body>
</html>

最后

以下是总结出来最全前端框架视频，包含： javascript/vue/react/angualrde/express/koa/webpack 等学习资料。

【领取方式】

关注头条前端全栈架构丶第一时间获取最新前端资讯学习

手机用户可私信关键词【前端】即可获取全栈工程师路线和学习资料！

单的工作过程

表单的信息发送与处理过程可以简单的进行图示，如下图。

以注册会员为例，用户在自己的电脑上打开相应的注册表单页面填写信息，完成填写后点击提交按钮，也就是图中1所示过程。

这时浏览器会将这些信息发送给处理这些信息的服务器，服务器上有使用类似asp或php写成的相应的处理程序，处理完成后，生成一个反馈信息，也就是2到3的过程。

然后服务器将处理后的信息发送给个人电脑，个人电脑在浏览器上通过一个新页面来提示用户处理结果。

这里就涉及到一个问题，一个网站会有针对不同用户的信息注册表单以及相应的信息处理程序，比如我们注册头条号就有"个人"、"企业"、"媒体"和"国家机构"的区分。如何使不同的表单找到相应的处理程序呢？在<form>标签中，有一个action属性就是为这个表单信息指定处理程序的。

<form>中的action属性

调用程序

<form>的action属性实际上就是为表单提示处理程序所在的路径，如果程序和页面在一个服务器中存储，那使用相对路径即可，如果在其他服务器，则要使用绝对路径。示例代码如下：

<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p> 
<p>Last name: <input type="text" name="lname" /></p> 
<input type="submit" value="Submit" />
</form>

这段代码中的"form_action.asp"程序和这个表单页面在一个文件夹中，故直接写名称即可调用。

发送邮件

action属性除了调用程序外，也可以发送邮件，示例代码如下：

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20"><br />
电邮：<br /><input type="text" name="mail" value="yourmail" size="20"><br />
内容：<br /><input type="text" name="comment" value="yourcomment" size="40"><br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

这段代码中。发送邮件的写法是这样的：action="MAILTO:someone@w3school.com.cn"，通过MAILTO:告诉浏览器，这里要发送邮件！然后输入相应的邮箱地址，这样就会把表单中的信息以邮件的形式发送到相应的邮箱中了。

大家可以把邮箱地址改成自己的邮箱试一下，浏览器会让大家选择发送邮件的程序。如图所示：

使用这个功能我们可以写一个简单的邮件发送页面，示例代码如下：

<form action="mailto:yourname@domain.com" method="post" enctype="text/plain">
主题：<input name="subject" type="text"><br>
抄送：<input name="cc" type="text"><br>
密送：<input name="bcc" type="text"><br>
正文：<textarea name="body"></textarea><br>
<input type="submit">
</form>

这样的写法大家可能会发现问题，即如果一个网站注册用户超过100人以后，靠这种手动输入用户邮箱的方法发送邮件简直就是折磨人啊！

实际上，在网站中，我们会把会员或注册用户的邮箱存在数据库中，通过调用数据库中的用户邮箱的程序语句来替换action中的具体邮箱地址即可，再通过程序，可以针对全部用户或部分用户进行群发信息。

其中，enctype属性是向服务器声明上传信息的形式，也就是向服务器说明发送的数据到底是数字还是英文还是中文还是编程语句。专业一些的说法是"规定在发送表单数据之前如何对其进行编码。"

全部属性值有三个，如图所示，大家可以简要理解一下。

除此之外，我们还发现一个属性叫做method（方法），通过上面的示例代码可知，method属性有两个属性值，一个是get一个是post，这是什么意思呢？

信息上传的两种方法

<form>中的method标签即为表单信息指定相应的发送方法。

方法有两种，一种叫get，这种方法通常用来发送简短的且低安全要求的信息，特点是速度比较快。

post经常用来发送体积较大的信息，如果发送一些对安全性要求高的信息，html的官方说明中建议使用post方法。

我个人认为，现阶段大家能记住这两个方法的主要特点即可。这一篇的内容实际上也是前端学习者对服务器端的运行的了解内容。

下面为大家附上更为专业的讲解，看不懂也没关系，尽量读，至少能被专业词汇洗礼一下!

method 属性

浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。

如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。

在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET。

POST 还是 GET？

如果表单处理服务器既支持 POST 方法又支持 GET 方法，那么你该选择哪种方法呢？下面是有关这方面的一些规律：

如果希望获得最佳表单传输性能，可以采用 GET 方法发送只有少数简短字段的小表单。

一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时，会限制其数目和长度，在这种情况下，对那些有许多字段或是很长的文本域的表单来说，就应该采用 POST 方法来发送。

如果你在编写服务器端的表单处理应用程序方面经验不足，应该选择 GET 方法。如果采用 POST 方法，就要在读取和解码方法做些额外的工作，也许这并不很难，但是也许你不太愿意去处理这些问题。

如果安全性是个问题，那么我们建议选用 POST 方法。GET 方法将表单参数直接放在应用程序的 URL 中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录。如果参数中包含了信用卡帐号这样的敏感信息，就会在不知不觉中危及用户的安全。而 POST 应用程序就没有安全方面的漏洞，在将参数作为单独的事务传输给服务器进行处理时，至少还可以采用加密的方法。

如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。而另一方面，使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 <a> 标签的内容。

以上内容来自W3school

今天的内容结束了，这一篇内容实践的东西比较少，主要是阅读与了解。

至此，HTML表单部分的讲解就算告于段落了，如果您有任何疑问请给我留言，如有问题或错误请予以斧正！

如果您喜欢我的教程请关注我，点赞也能让我充满动力！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

sp中四种传递参数的方法，我觉得总结一下，挺好的，以备后用！

1、form表单

2、request.setAttribute();和request.getAttribute();

3、超链接：<a herf="index.jsp"?a=a&b=b&c=c>name</a>

1、form表单

form.jsp:

<%@page contentType="text/html; charset=GB2312"%> 
<html> 
 <head> 
 <title> 
 form.jsp file 
 </title> 
 </head> 
 
 <body style="background-color:lightblue"> 
 
 <h2 style="font-family:arial;color:red;font-size:25px;text-align:center">登录页面</h2> 
 
 <form action="result.jsp" method="get" align="center"> 
 姓名：<input type="text" name="name" size="20" value="" maxlength="20"><br/> 
 
 密码：<input type="password" name="password" size="20" value="" maxlength="20"><br/> 
 
 <!--在爱好前空一个空格，是为了排版好看些--> 
 
 爱好：<input type="checkbox" name="hobby" value="唱歌">唱歌 
 <input type="checkbox" name="hobby" value="足球">足球 
 <input type="checkbox" name="hobby" value="篮球">篮球<br/><br/> 
 
 <input type="submit" name="submit" value="登录"> 
 <input type="reset" name="reset" value="重置"><br/> 
 </form> 
 
 </body> 
</html>

result.jsp:

 1 <%@page language="java" import="java.util.*" pageEncoding="GB2312"%> 
 2 <html> 
 3 <head> 
 4 <title> 
 5 result.jsp file 
 6 </title> 
 7 </head> 
 8 
 9 <body bgcolor="ffffff"> 
10 <% 
11 request.setCharacterEncoding("GB2312"); 
12 
13 String name=request.getParameter("name"); 
14 name=new String(name.getBytes("iso-8859-1"),"GB2312"); 
15 
16 String pwd=request.getParameter("password"); 
17 String[] hobby=request.getParameterValues("hobby");//注意这里的函数是getParameterValues()接受一个数组的数据 
18 
19 %> 
20 
21 <% 
22 if(!name.equals("") && !pwd.equals("")) 
23 { 
24 %> 
25 
26 您好！登录成功！<br/> 
27 姓名：<%=name%><br/> 
28 密码：<%=pwd%><br/> 
29 爱好：<% 
30 for(String ho: hobby) 
31 { 
32 ho=new String(ho.getBytes("iso-8859-1"),"GB2312"); 
33 out.print(ho+" "); 
34 } 
35 %> 
36 <% 
37 } 
38 else 
39 { 
40 %> 
41 请输入姓名或密码！ 
42 <% 
43 } 
44 %> 
45 </body> 
46 </html>

注意：form表单的提交方式为get，在参数传递时会遇到中文乱码的问题，一个简单的解决方法是，将接受到的字符串先转换成一个byte数组，再用String构造一个新的编码格式的String，如：

1 String name=request.getParameter("name"); 
2 name=new String(name.getBytes("iso-8859-1"),"GB2312");

如果form表单的提交方式为post，解决乱码问题的简单办法是，使用 request.setCharacterEncoding("GB2312");设置request的编码方式。

为什么会出现中文乱码问题呢？因为Tomcat服务器默认的系统编码方式为iso- 8859-1，你传递参数给服务器时，使用的是默认的iso-8859-1的编码方式，但是服务器向你返回信息时，是按page指令中设置的编码方式，如：<%@page language="java" import="java.util.*" pageEncoding="GB2312"%>，这样就混合了两种编码方式，所以会出现乱码，所以解决之道就是统一传递和接收的编码方式。

2、request.setAttribute()和request.getAttribute()

set.jsp:

<%@page contentType="text/html; charset=GB2312"%> 
<html> 
 <head> 
 <title> 
 set.jsp file 
 </title> 
 </head> 
 
 <body style="background-color:lightblue"> 
 <% 
 request.setAttribute("name","心雨"); 
 %> 
 <jsp:forward page="get.jsp"/> 
 </body> 
</html>

get.jsp:

<%@page contentType="text/html; charset=GB2312"%> 
<html> 
 <head> 
 <title> 
 get.jsp file 
 </title> 
 </head> 
 
 <body style="background-color:lightblue"> 
 <% 
 out.println("传递过来的参数是："+request.getAttribute("name")); 
 %> 
 </body> 
</html>

request.setAttribute()和request.getAttribute()是配合<jsp:forward>或是include指令来实现的。

3、超链接：<a herf="index.jsp?a=a&b=b&c=c">name</a>

href.jsp:

<%@page contentType="text/html; charset=GB2312"%> 
<html> 
 <head> 
 <title> 
 href.jsp file 
 </title> 
 </head> 
 
 <body style="background-color:lightblue"> 
 <a href="getHerf.jsp?name=心雨&password=123">传递参数</a> 
 </body> 
</html>

getHref.jsp:

<%@page contentType="text/html; charset=GB2312"%> 
<html> 
 <head> 
 <title> 
 getHref.jsp file 
 </title> 
 </head> 
 
 <body style="background-color:lightblue"> 
 <% 
 String name=request.getParameter("name"); 
 name=new String(name.getBytes("iso-8859-1"),"gb2312"); 
 
 out.print("name:"+name); 
 %> 
 <br/> 
 <% 
 out.print("password:"+request.getParameter("password")); 
 %> 
 </body> 
</html>

这种传递参数的方法和form表单的get方式类似，是通过地址栏传递的参数，其乱码解决方法也和form 的get方式一样。

4、<jsp:param>

param.jsp:

<%@page contentType="text/html; charset=GB2312"%> 
<html> 
 <head> 
 <title> 
 param.jsp file 
 </title> 
 </head> 
 
 <body style="background-color:lightblue"> 
 
 <%request.setCharacterEncoding("GB2312");%> 
 
 <jsp:forward page="getParam.jsp"> 
 <jsp:param name="name" value="心雨"/> 
 <jsp:param name="password" value="123"/> 
 </jsp:forward> 
 
 </body> 
</html>

getParam.jsp:

<%@page contentType="text/html; charset=GB2312"%> 
<html> 
 <head> 
 <title> 
 getParam.jsp file 
 </title> 
 </head> 
 
 <body style="background-color:lightblue"> 
 <% 
 String name=request.getParameter("name"); 
 out.print("name:"+name); 
 %> 
 <br/> 
 <% 
 out.print("password:"+request.getParameter("password")); 
 %> 
 </body> 
</html>

这里发现了一个奇怪的问题，还是在中文乱码的问题上，在form表单的例子中，如果传递方式为post，则只需要在接收参数的页面设置request的编码方式就可以了，即request.setCharacterEncoding("GB2312");，注意是在接收参数的页面，如果将该句放到form 表单里，那么不起作用，仍然是乱码。而在本例中，为了使传递的参数不出现乱码，却是将 request.setCharacterEncoding("GB2312");放在发送参数的页面中，才会正常显示中文，放在接收参数的页面中，不起作用。也许这就是<jsp:param>和form表单传递参数不同的地方。为什么会有这个不同呢？可能是因为form表单中的参数是由客户端传送到服务端上的，需要经过一个request的打包过程，但是<jsp:param>传递的参数本身就是在服务器端的，不需要经历由客户端到服务端这么一个过程，但是服务器里的参数传递是这么回事呢？这个问题，我不知道了！真是知识是一个扩大的圆圈，你知道的越多，那么不知道的就越多！努力吧！

在线咨询

上一篇：个体工商户营业执照注销流程
下一篇：BootStrap3.X模态框垂直居中显示

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商