web實現數據交互的幾種常見方式

時間 2019-11-17

標籤 web 實現數據交互幾種常見方式欄目 HTML 简体版

原文原文鏈接

前言

在當今社會，做爲一名前端程序猿，並非一昧的去製做靜態頁面就能夠知足滴；你說你會製做網頁，好吧，只能說你算是一個前端程序猿。但這是你做爲一個程序猿最基本的能力，並不會爲你進行加分；javascript

　　咱們都明白，要想提升競爭力，提升本身的技能是十灰重要的。先後臺的數據交互就是一個很好的加分項。今天，就帶你們一塊兒瞭解一下web前端實現數據交互的幾種方式；php

1、Ajax

做爲一個前端程序猿，對於各類JS框架和各類庫確定不陌生。原生js的ajax以及jQuery的ajax都是十分經常使用的數據交互的方式；html

1.1原生JS的Ajax

你們可能對原生JS比較陌生，畢竟相對於jQuery的ajax,原生的確實有些複雜，不夠jQuery的ajax是由原生的ajax封裝而來。因而可知了解原生的ajax是十分必要的；前端

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

接下啦，給你們介紹XMLHttpRequest中的屬性與方法：jquery

XMLHttpRequest屬性：web

2、XMLHttpRequest方法：ajax

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

第一步：得到XMLHttpRequest對象；跨域

var ajax = new XMLHttpRequest();

第二步：設置狀態監聽函數

ajax.onreadystatechange = function(){}

第三步：open一個請求：

其中，第一個參數爲傳遞方式：get/post;

第二個參數：請求數據的url地址；

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

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

第四步：send一個請求。能夠發送對象和字符串，不須要傳遞數據發送null;

ajax.send(null);

第五步，在監聽函數中，判斷readyState==4 && status == 200表示請求成功；

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

第六步，使用ajax.responseText、ajax.responseXML接收響應數據，並使用原生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             //第二步：設置狀態監聽函數
11             ajax.onreadystatechange = function(){
12                 //console.log(ajax.readyState);
13                 //console.log(ajax.status);
14                 //第五步，在監聽函數中，判斷readyState==4 && status == 200表示請求成功；
15                 if (ajax.readyState == 4 && ajax.status == 200) {
16                     //第六步，使用ajax.responseText、ajax.responseXML接收響應數據，並使用原生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一個請求。能夠發送對象和字符串，不須要傳遞數據發送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；

一、eval函數用於將字符串中的代碼解析出來並執行
當使用eval函數解析JSON字符串時，須要在函數內部將JSON字符串用()拼接
eval("("+json1+")")表示eval函數中的字符串不是用於執行，而是進行字符串解析

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

舉個小例子：

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

結果：

1.2jQuery中的Ajax

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

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

再再舉個栗子：

<script type="text/javascript">
    $(function(){
        
        $.ajax({
            url : "url",
            type: "post",
            data : {
                name : "李四",
                age : 28
            },
            //dataType : "json",
            success : function(data){
                // JQuery中吧JSON字符串轉成JSON對象
                var jsons = $.parseJSON(data);
                console.log(jsons);
            },
            error: function(){
                alert("請求失敗啦！");
            },
            statusCode:{
                "404":function(){
                    alert("404表示頁面沒有找到");
                },
                "500":function(){
                    alert("500表示服務器內部錯誤");
                },
                "200":function(){
                    alert("200表示請求成功");
                }
            }
        });
</script>

1.2.2$.post/$.get

在jQuery中，還進一步封裝了Ajax，$.get(); $.post(); 這兩個函數，是在$.ajax()的基礎上進行封裝而來。能夠直接默認發送get請求或post請求；

接受四個參數：
① 請求的URL路徑。至關於$.ajax()裏面的url；
② 向後臺傳遞的數據。至關於$.ajax()裏面的data；
③ 請求成功的回調函數。至關於$.ajax()裏面的success；
④ 預期返回的數據類型。至關於$.ajax()裏面的dataType；

瘋狂的舉栗子：

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

2、AngularJS中的$http

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

1 $http({
2 method:"get/post", /*請求的方法*/
3 url:" " /*請求的地址*/
4 }).then(function(classes){
5 /*請求成功的回調函數*/
6 },function(){
7 /*請求失敗的回調函數*/
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>數學成績</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){
                /*請求成功的回調函數*/
                $scope.classes=classes.data;
                
//                $scope.name = classes.data.name;
                alert("請求成功！");
            },function(){
                /*請求成功的回調函數*/
                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",{/*須要傳遞到後臺的參數*/}).then(function(){
2                 alert("請求成功！")
3                 },function(){
4                 alert("請求失敗！");
5             })
6         })
7

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

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

3.1POST表單提交

在http中，有個HTTP POST變量：$_POST，其做用就是獲取經過前臺post發送的數據；

再次瘋狂的舉栗子：

 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         <!--<form action="03-chaoQuanJuArray.php" method="get">-->
10             用戶名：<input type="text" name="username" />        
11             密碼：<input type="password" name="pwd" />
12             <!--<input type="file" name="file" />-->
13             <button id="btn">點擊發送post請求</button>
14         <!--</form>-->
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：

<?php
    header("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請求數據

最後瘋狂的舉例：

<!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" />
            <!--<input type="file" name="file" />-->
            <button id="btn">點擊發送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:

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

結果：