當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

web实现数据交互的几种常见方式

發(fā)布時間：2023/12/2 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 web实现数据交互的几种常见方式小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言

? ? ? 在當今社會，作為一名前端程序猿，并不是一昧的去制作靜態(tài)頁面就可以滿足滴；你說你會制作網頁，好吧，只能說你算是一個前端程序猿。但這是你作為一個程序猿最基本的能力，并不會為你進行加分；

　　我們都明白，要想提高競爭力，提高自己的技能是十灰重要的。前后臺的數(shù)據(jù)交互就是一個很好的加分項。今天，就帶大家一起了解一下web前端實現(xiàn)數(shù)據(jù)交互的幾種方式；

一、Ajax

作為一個前端程序猿，對于各種JS框架和各種庫肯定不陌生。原生js的ajax以及jQuery的ajax都是十分常用的數(shù)據(jù)交互的方式；

1.1原生JS的Ajax

大家可能對原生JS比較陌生，畢竟相對于jQuery的ajax,原生的確實有些復雜，不夠jQuery的ajax是由原生的ajax封裝而來。由此可見了解原生的ajax是十分必要的；

首先，要了解異步的javascript和xml,核心對象為XMLHttpRequest.

接下啦，給大家介紹XMLHttpRequest中的屬性與方法：

XMLHttpRequest屬性：

二、XMLHttpRequest方法：

接下來，把栗子中的步驟整理一下：

第一步：獲得XMLHttpRequest對象；

var ajax = new XMLHttpRequest();

第二步：設置狀態(tài)監(jiān)聽函數(shù)

ajax.onreadystatechange = function(){}

第三步：open一個請求：

?其中，第一個參數(shù)為傳遞方式：get/post;

第二個參數(shù)：請求數(shù)據(jù)的url地址；

第三個參數(shù)：true/false。true表示異步請求。false表示同步請求

ajax.open("GET","h5.json",true);

第四步：send一個請求。可以發(fā)送對象和字符串，不需要傳遞數(shù)據(jù)發(fā)送null;

ajax.send(null);

第五步，在監(jiān)聽函數(shù)中，判斷readyState==4 && status == 200表示請求成功；

if (ajax.readyState == 4 && ajax.status == 200) {}

第六步，使用ajax.responseText、ajax.responseXML接收響應數(shù)據(jù)，并使用原生js操作DOM進行顯示；

console.log(JSON.parse(ajax.responseText));

直接上栗子：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 //第一步：獲得XMLHttpRequest對象 8 var ajax = new XMLHttpRequest(); 9 10 //第二步：設置狀態(tài)監(jiān)聽函數(shù) 11 ajax.onreadystatechange = function(){ 12 //console.log(ajax.readyState); 13 //console.log(ajax.status); 14 //第五步，在監(jiān)聽函數(shù)中，判斷readyState==4 && status == 200表示請求成功； 15 if (ajax.readyState == 4 && ajax.status == 200) { 16 //第六步，使用ajax.responseText、ajax.responseXML接收響應數(shù)據(jù)，并使用原生js操作DOM進行顯示 17 //console.log(ajax.responseText); 18 //console.log(ajax.responseXML);//返回不是XMl,顯示null 19 console.log(JSON.parse(ajax.responseText)); 20 //console.log(eval("("+ajax.responseText+")")); 21 22 23 } 24 } 25 26 //第三步：open一個請求 27 ajax.open("GET","h5.json",true); //true表示異步請求。false表示同步請求 28 29 //第四步：send一個請求?？梢园l(fā)送對象和字符串，不需要傳遞數(shù)據(jù)發(fā)送null; 30 ajax.send(null); 31 32 var str = "alert('111')"; 33 eval(str); 34 eval("alert('111')"); 35 36 var json1 = "{'name':'zhangsan'}"; 37 console.log(eval("("+json1+")")); 38 </script> 39 </head> 40 <body> 41 </body> 42 </html>

?json:

1 [ 2 { 3 "name": "zhangsan", 4 "age": 17, 5 "hobby": [ 6 "吃", 7 "喝", 8 "玩", 9 "樂" 10 ], 11 "score":{ 12 "math":78, 13 "chinese":89 14 } 15 }, 16 { 17 "name": "zhangsan", 18 "age": 17, 19 "hobby": [ 20 "吃", 21 "喝", 22 "玩", 23 "樂" 24 ], 25 "score":{ 26 "math":78, 27 "chinese":89 28 } 29 }, 30 { 31 "name": "zhangsan", 32 "age": 17, 33 "hobby": [ 34 "吃", 35 "喝", 36 "玩", 37 "樂" 38 ], 39 "score":{ 40 "math":78, 41 "chinese":89 42 } 43 } 44 45 ]

結果：

1.1.2解析json的兩種方式

?在解析json的時候，通常我們使用JSON.parse()進行解析；但是，有很多程序猿使用eval()來解析json；

1、eval函數(shù)用于將字符串中的代碼解析出來并執(zhí)行
當使用eval函數(shù)解析JSON字符串時，需要在函數(shù)內部將JSON字符串用()拼接
eval("("+json1+")")表示eval函數(shù)中的字符串不是用于執(zhí)行，而是進行字符串解析

eval("("+json1+")") = JSON.parse(json1);

?舉個小例子：

1 var json1 = "{'name':'zhangsan'}"; 2 console.log(eval("("+json1+")"));

結果：

1.2jQuery中的Ajax

?$.ajax():是JQuery最底層的ajax函數(shù)，參數(shù)接收一個大對象。對象里面的屬性和方法，表示ajax請求的相關設置：

① url : 請求遠程文件的路徑
② type： Ajax請求的類型，可選值 get/post
③ data: 對象格式。向后臺發(fā)送一個對象，表示傳遞的數(shù)據(jù)。
常用與type為"post"的請求方式；
?如果type為"get"，可以直接使用？追加在URL的后面。
④ dataType ：預期后臺返回什么類型的數(shù)據(jù)。
"text"-字符串 "json"-JSON對象
?⑤ success: 請求成功的回調函數(shù)。參數(shù)接受一個data，表示后臺返回的數(shù)據(jù)。
?⑥ error : 請求失敗的時候的回調函數(shù)
?⑦ statusCode ：接受一個對象，對象的鍵值對是status狀態(tài)碼和對應的回調函數(shù)，表示當請求狀態(tài)碼是對應數(shù)
字時，執(zhí)行具體的操作函數(shù)。
200-正常請求成功 404-頁面沒有找到 500-服務器內部錯誤。

再再舉個栗子：

1.2.2$.post/$.get

在jQuery中，還進一步封裝了Ajax，$.get();? $.post(); 這兩個函數(shù)，是在$.ajax()的基礎上進行封裝而來?？梢灾苯幽J發(fā)送get請求或post請求；

接受四個參數(shù)：
① 請求的URL路徑。相當于$.ajax()里面的url；
② 向后臺傳遞的數(shù)據(jù)。相當于$.ajax()里面的data；
③ 請求成功的回調函數(shù)。相當于$.ajax()里面的success；
④ 預期返回的數(shù)據(jù)類型。相當于$.ajax()里面的dataType；

瘋狂的舉栗子：

$.post("Surl",{data:"aaa"},function(data){console.log(data);},"json");

二、AngularJS中的$http

在上篇的AngularJS中小編講了一下$http,今天再來復習一遍；AngularJS中的$http的基本樣式比較簡單，

1 $http({ 2 method:"get/post", /*請求的方法*/ 3 url:" " /*請求的地址*/ 4 }).then(function(classes){ 5 /*請求成功的回調函數(shù)*/ 6 },function(){ 7 /*請求失敗的回調函數(shù)*/ 8 });

直接上栗子：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body ng-app="app" ng-controller="ctrl"><table width="400px"border="1"style="border-collapse: collapse;"><tr><th>姓名</th><th>年齡</th><th>興趣</th><th>語文成績</th><th>數(shù)學成績</th><th>總分</th> </tr><tr ng-repeat="item in classes|orderBy:'score.chinese+score.math'"><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.hobby}}</td><td>{{item.score.math}}</td><td>{{item.score.chinese}}</td><td>{{item.score.math+item.score.chinese}}</td></tr></table></body><script type="text/javascript" src="js/angular.js"></script><script type="text/javascript">angular.module("app",[]).controller("ctrl",function($scope,$http){$http({method:"get", /*請求的方法*/url:"AngularJs.json" /*請求的地址*/}).then(function(classes){/*請求成功的回調函數(shù)*/$scope.classes=classes.data;// $scope.name = classes.data.name;alert("請求成功！");},function(){/*請求成功的回調函數(shù)*/alert("請求失敗");});});
</script> </html>

json：

1 [2 {3 "name": "張三",4 "age": 17,5 "hobby": [6 "吃",7 "喝",8 "玩",9 "樂" 10 ], 11 "score":{ 12 "math":48, 13 "chinese":59 14 } 15 }, 16 { 17 "name": "張三", 18 "age": 17, 19 "hobby": [ 20 "吃", 21 "喝", 22 "玩", 23 "樂" 24 ], 25 "score":{ 26 "math":88, 27 "chinese":99 28 } 29 }, 30 { 31 "name": "張三", 32 "age": 17, 33 "hobby": [ 34 "吃", 35 "喝", 36 "玩", 37 "樂" 38 ], 39 "score":{ 40 "math":68, 41 "chinese":89 42 } 43 }, 44 { 45 "name": "張三", 46 "age": 17, 47 "hobby": [ 48 "吃", 49 "喝", 50 "玩", 51 "樂" 52 ], 53 "score":{ 54 "math":78, 55 "chinese":89 56 } 57 } 58 ]

結果：

當然，他也有簡寫形式：

$http.get('/someUrl', config).then(successCallback, errorCallback); $http.post('/someUrl', data, config).then(successCallback, errorCallback);

舉個栗子：

1 $http.get("angularJs.json",{/*需要傳遞到后臺的參數(shù)*/}).then(function(){ 2 alert("請求成功！") 3 },function(){ 4 alert("請求失敗！"); 5 }) 6 }) 7

三、表單提交的get/post請求

在最開始的前端學習中，表單是很重要的一部分。要知道，表單的提交過程也是想后臺的一種數(shù)據(jù)交互的過程；今天，就來看一下表單請求到PHP；

3.1POST表單提交

?在http中，有個HTTP POST變量：$_POST，其作用就是獲取通過前臺post發(fā)送的數(shù)據(jù)；

再次瘋狂的舉栗子：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 8 <body> 9  10 用戶名：<input type="text" name="username" /> 11 密碼：<input type="password" name="pwd" /> 12  13 <button id="btn">點擊發(fā)送post請求</button> 14  15 16 <script type="text/javascript"> 17 $("#btn").click(function(){ 18 var username = $("input[name='username']").val(); 19 var pwd = $("input[name='pwd']").val(); 20 $.post("03-chaoQuanJuArray.php",{ 21 "username":username, 22 "pwd":pwd, 23 },function(data){ 24 alert(data); 25 }) 26 }); 27 </script> 28 29 </body> 30 </html>

PHP：

<?phpheader("Content-Type:text/html;charset=utf-8"); if(isset($_POST["username"])&&isset($_POST["pwd"])){if($_POST["username"]=='zhang'&&$_POST["pwd"]==123){echo "登錄成功";}else{echo "登錄失敗";}}

?結果：

3.2表單Get請求數(shù)據(jù)

?最后瘋狂的舉例：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><body><form action="03-chaoQuanJuArray.php" method="get">用戶名：<input type="text" name="username" /> 密碼：<input type="password" name="pwd" /><button id="btn">點擊發(fā)送post請求</button></form><script type="text/javascript">$("#btn").click(function(){var username = $("input[name='username']").val();var pwd = $("input[name='pwd']").val();$.post("03-chaoQuanJuArray.php",{"username":username,"pwd":pwd,},function(data){alert(data);})});</script></body> </html>

?php:

<?phpheader("Content-Type:text/html;charset=utf-8"); if(isset($_GET["username"])&& isset($_GET["pwd"])){if($_GET["username"]=='zhang'&&$_GET["pwd"]==123){echo "登錄成功";}else{echo "登錄失敗";}}

結果：

編者按

今天小編就給大家介紹著四種前后臺數(shù)據(jù)交互的方式。還有，localStorage和sessionStorage中的數(shù)據(jù)也是數(shù)據(jù)交互的一種方式。

而在數(shù)據(jù)交互的過程中，經常會需要進行跨域請求，小編之后會給大家講解。

轉載于:https://www.cnblogs.com/zxt-17862802783/p/7787258.html

總結

以上是生活随笔為你收集整理的web实现数据交互的几种常见方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：和田玉青花料是不是不值钱（和田玉青花籽料
下一篇：洛谷 P1313 计算系数