Ajax的简单实现(Json)

之前写的是一般的Ajax

if (request.status === 200) { document.getElementById("createResult").innerHTML = request.responseText; }

可以看到值的接收是通过request.responseText来接收的

而通过这种直接判断纯文本的方式是不太灵活的

通过Json这种数据格式，会方便很多

把之前的例子重新用Json写一遍

PHP页面

 1 <?php
 2 //改变Content-Type属性
 3 header("Content-Type:application/json;charset:utf-8");
 4 $nClass = array(
 5     array("name" => "龙傲天","id" => "1","age" => "12","MartialArt" => "剑宗"),
 6     array("name" => "钟岳","id" => "2","age" => "22","MartialArt" => "剑门山"),
 7     array("name" => "叶凡","id" => "3","age" => "18","MartialArt" => "圣地")
 8 );
 9 
10 if ($_SERVER["REQUEST_METHOD"] == "GET"){
11     nSearch();
12 } elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
13     # code...
14     nCreate();
15 }
16 
17 function nSearch(){
18     if (!isset($_GET["id"])||empty($_GET["id"])){
19         //改成Json数据格式
20         echo '{"success":false, "msg":"输入参数错误"}';
21         return;
22     }
23 
24     global $nClass;
25     $ID = $_GET["id"];
26     //改成Json数据格式
27     $result = '{"success":false,"msg":"没有该学员"}';
28 
29     foreach ($nClass as $idValue) {
30         if ($idValue["id"] == $ID) {
31             //改成Json数据格式
32             $result = '{"success":true,"msg":"找到该学员：学号：'.$idValue["id"].',姓名：'.$idValue["name"].',年龄：'.$idValue["age"].',门派：'.$idValue["MartialArt"].'"}';
33             break;
34         }
35     }
36 
37     echo $result;
38 }
39 
40 function nCreate(){
41     if (!isset($_POST["name"]) || empty($_POST["name"])
42     || !isset($_POST["id"]) || empty($_POST["id"])
43     || !isset($_POST["age"]) || empty($_POST["age"])
44     || !isset($_POST["MartialArt"]) || empty($_POST["MartialArt"])){
45         //改成Json数据格式
46         echo '{"success":false,"msg":"输入参数错误，学员信息不完全"}';
47         return;
48      }
49         //改成Json数据格式
50         echo '{"success":true,"msg":"学员：'.$_POST["name"].'信息保存成功！"}';
51 }
52 
53 
54 ?>

HTML页面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 </head>
10 
11 <body>
12     <h1>人物查询</h1>
13     <label>请输入人物学号：</label>
14     <input type="text" id="keyword">
15     <button id="search">查询</button>
16     <p id="searchResult"></p>
17 
18     <h1>人物新建</h1>
19     <label>请输入姓名：</label>
20     <input type="text" id="oName"><br>
21     <label>请输入学号：</label>
22     <input type="text" id="oId"><br>
23     <label for="">请输入年龄：</label>
24     <input type="text" id="oAge"><br>
25     <label>请输入门派：</label>
26     <input type="text" id="oMartialArt"><br>
27     <button id="save">保存</button>
28     <p id="createResult"></p>
29 
30     <script type="text/javascript">
31         var nSearch = document.getElementById("search");
32         var key = document.getElementById("keyword");
33         var sResult = document.getElementById("searchResult");
34         nSearch.onclick = function () {
35             var request = new XMLHttpRequest();
36             request.open("GET", "newJsonPHP.php?id=" + key.value);
37             request.send();
38             request.onreadystatechange = function () {
39                 if (request.readyState == 4) {
40                     if (request.status == 200) {
41                         var data = JSON.parse(request.responseText);
42                         if (data.success) {
43                             sResult.innerHTML = data.msg;
44                         } else {
45                             sResult.innerHTML = "输入错误：" + data.msg;
46                         }
47                     }
48                 }
49             }
50         }
51         var nSave = document.getElementById("save");
52         var oName = document.getElementById("oName");
53         var oId = document.getElementById("oId");
54         var oAge = document.getElementById("oAge");
55         var oMartialArt = document.getElementById("oMartialArt");
56         var oResult = document.getElementById("createResult");
57 
58         nSave.onclick = function () {
59             var request = new XMLHttpRequest();
60             request.open("POST", "newJsonPHP.php")
61             var data = "name=" + oName.value + "&id=" + oId.value + "&age=" + oAge.nodeValue + "&MartialArt=" +
62                 oMartialArt
63                 .value;
64             request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
65             request.send(data);
66 
67             request.onreadystatechange = function () {
68                 if (request.readyState === 4) {
69                     if (request.status === 200) {
70                         var data = JSON.parse(request.responseText);
71                         if (data.success) {
72                             oResult.innerHTML = data.msg;
73                         } else {
74                             oResult.innerHTML = "出现错误：" + data.msg;
75                         }
76                     } else {
77                         alert("发生错误：" + request.status);
78                     }
79                 }
80             }
81         }
82     </script>
83 
84 </body>
85 
86 </html>