Ajax的简单实现(JQuary)

还是之前的例子，相对来说，用JQ就简单了很多，真的多，因为JQ直接把方法都写好了，直接调用就行了,,ԾㅂԾ,,

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里面需要引入JQ库了

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <!--引入JQ-->
 8     <script type="text/javascript" src="../PHPTest/Js/jquery-1.12.4.js"></script>
 9     <title>Document</title>
10 </head>
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         $(document).ready(function (){
32             $("#search").click(function () {
33                 $.ajax({
34                     type:"GET",
35                     url:"newJsonPHP.php?id=" + $("#keyword").val(),
36                     dataType:"JSON",
37                     success:function (data){
38                         if (data.success) {
39                             $("#searchResult").html(data.msg);
40                         } else {
41                             $("#searchResult").html("出现错误：" + data.msg);
42                         }
43                     },
44                     error:function (JqXHR) {
45                         alert("发生错误：" + JqXHR.status);
46                     }
47                 });
48             });
49 
50             $("#save").click(function () {
51                 $.ajax({
52                     type:"POST",
53                     url:"newJsonPHP.php",
54                     dataType:"JSON",
55                     data:{
56                         name:$("#oName").val(),
57                         id:$("#oId").val(),
58                         age:$("#oAge").val(),
59                         MartialArt:$("#oMartialArt").val(),
60                     },
61                     success:function (data){
62                         if (data.success) {
63                             $("#createResult").html(data.msg);
64                         } else {
65                             $("#createResult").html("出现错误：" + data.msg);
66                         }
67                     },
68                     error:function (JqXHR) {
69                         alert("发生错误：" + JqXHR.status);
70                     }
71                 });
72             });
73 
74 
75         });
76 
77         
78 
79     </script>
80 </body>
81 </html>