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小時內與您取得聯系。

整合營銷服務商