之前写的是一般的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>