之前写的是一般的Ajax

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

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

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

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

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

PHP页面

"龙傲天","id" => "1","age" => "12","MartialArt" => "剑宗"), array("name" => "钟岳","id" => "2","age" => "22","MartialArt" => "剑门山"), array("name" => "叶凡","id" => "3","age" => "18","MartialArt" => "圣地") ); if ($\_SERVER\["REQUEST\_METHOD"\] == "GET"){ nSearch(); } elseif ($\_SERVER\["REQUEST\_METHOD"\] == "POST") { # code... nCreate(); } function nSearch(){ if (!isset($\_GET\["id"\])||empty($\_GET\["id"\])){ //改成Json数据格式 echo '{"success":false, "msg":"输入参数错误"}'; return; } global $nClass; $ID = $\_GET\["id"\]; //改成Json数据格式 $result = '{"success":false,"msg":"没有该学员"}'; foreach ($nClass as $idValue) { if ($idValue\["id"\] == $ID) { //改成Json数据格式 $result = '{"success":true,"msg":"找到该学员：学号：'.$idValue\["id"\].',姓名：'.$idValue\["name"\].',年龄：'.$idValue\["age"\].',门派：'.$idValue\["MartialArt"\].'"}'; break; } } echo $result; } function nCreate(){ if (!isset($\_POST\["name"\]) || empty($\_POST\["name"\]) || !isset($\_POST\["id"\]) || empty($\_POST\["id"\]) || !isset($\_POST\["age"\]) || empty($\_POST\["age"\]) || !isset($\_POST\["MartialArt"\]) || empty($\_POST\["MartialArt"\])){ //改成Json数据格式 echo '{"success":false,"msg":"输入参数错误，学员信息不完全"}'; return; } //改成Json数据格式 echo '{"success":true,"msg":"学员：'.$\_POST\["name"\].'信息保存成功！"}'; } ?>

HTML页面

人物查询

请输入人物学号：

查询

 <h1>人物新建</h1>  
 <label>请输入姓名：</label>  
 <input type="text" id="oName"><br>  
 <label>请输入学号：</label>  
 <input type="text" id="oId"><br>  
 <label for="">请输入年龄：</label>  
 <input type="text" id="oAge"><br>  
 <label>请输入门派：</label>  
 <input type="text" id="oMartialArt"><br>  
 <button id="save">保存</button>  
 <p id="createResult"></p>

 <script type="text/javascript">  
     var nSearch = document.getElementById("search");  
     var key = document.getElementById("keyword");  
     var sResult = document.getElementById("searchResult");  
     nSearch.onclick = function () {  
         var request = new XMLHttpRequest();  
         request.open("GET", "newJsonPHP.php?id=" + key.value);  
         request.send();  
         request.onreadystatechange = function () {  
             if (request.readyState == 4) {  
                 if (request.status == 200) {  
                     var data = JSON.parse(request.responseText);  
                     if (data.success) {  
                         sResult.innerHTML = data.msg;  
                     } else {  
                         sResult.innerHTML = "输入错误：" + data.msg;  
                     }  
                 }  
             }  
         }  
     }  
     var nSave = document.getElementById("save");  
     var oName = document.getElementById("oName");  
     var oId = document.getElementById("oId");  
     var oAge = document.getElementById("oAge");  
     var oMartialArt = document.getElementById("oMartialArt");  
     var oResult = document.getElementById("createResult");

     nSave.onclick = function () {  
         var request = new XMLHttpRequest();  
         request.open("POST", "newJsonPHP.php")  
         var data = "name=" + oName.value + "&id=" + oId.value + "&age=" + oAge.nodeValue + "&MartialArt=" +  
             oMartialArt  
             .value;  
         request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
         request.send(data);

         request.onreadystatechange = function () {  
             if (request.readyState === 4) {  
                 if (request.status === 200) {  
                     var data = JSON.parse(request.responseText);  
                     if (data.success) {  
                         oResult.innerHTML = data.msg;  
                     } else {  
                         oResult.innerHTML = "出现错误：" + data.msg;  
                     }  
                 } else {  
                     alert("发生错误：" + request.status);  
                 }  
             }  
         }  
     }  
 </script>