用原生js,json解析ajax传回来的数据

来源：互联网发布：奥鹏网络统考试卷编辑：程序博客网时间：2024/05/17 09:15

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ajax demo</title></head><body><h1>请输入查询编号</h1><input type=text id="keyword"><input type="button" id="search" value="查询"><p id="searchResult"></p><h1>请输入以下信息</h1><lable>姓名：</lable><input type="text" id="name"><lable>班级：</lable><input type="text" id="aclass"><lable>年龄</lable><select id="sex"><option value="男">男</option><option value="女">女</option></select><input type="button" id="create" value="提交"><p id="createResult"></p><script>var request=null;document.getElementById("search").onclick = function() {if(window.XMLHttpRequest){request = new XMLHttpRequest();}else{request = new ActiveXObject("Microsoft.XMLHTTP");//IE5,IE6}request.open("GET","index.php?number="+document.getElementById("keyword").value);request.send();request.onreadystatechange = function(){if(request.readyState == 4){if(request.status == 200){//解析json字符串var data = JSON.parse(request.responseText);if(data.success){document.getElementById("searchResult").innerHTML = data.msg;}else{document.getElementById("searchResult").innerHTML = "出现错误"+data.msg;}}}}};document.getElementById("create").onclick = function() {if(window.XMLHttpRequest){request = new XMLHttpRequest();}else{request = new ActiveXObject("Microsoft.XMLHTTP");}request.open("POST","index.php");var data = "name="+document.getElementById("name").value+"&aclass="+document.getElementById("aclass").value+"&sex="+document.getElementById("sex").value;//代表提交的是表单类型，用post提交的一定要设置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){document.getElementById("createResult").innerHTML=data.msg;}else{document.getElementById("createResult").innerHTML="出现错误"+data.msg;}}else{alert("request error"+request.status);}}}};</script></body></html>

<?phpheader("Content-Type:application/json;charset=utf-8");//header("Content-Type:text/plain;charset=utf-8");//代表提交的数据是文本类型//header("Content-Type:text/xml;charset=utf-8");//header("Content-/Type:text/html;charset=utf-8");//header("Content-Type"application/javascript;charset=utf-8");$student = array    (        array("name"=>"张三","aclass"=>"1班","sex"=>"男","number"=>101),        array("name"=>"李四","aclass"=>"2班","sex"=>"男","number"=>102),        array("name"=>"王五","aclass"=>"1班","sex"=>"男","number"=>103)               );if($_SERVER['REQUEST_METHOD']=="GET"){    search();}elseif($_SERVER['REQUEST_METHOD']=="POST"){    create();}function search() {    if(!isset($_GET["number"]) || empty($_GET["number"])){        echo '{"success":false,"msg":"参数错误"}';        return;    }        global $student;    $number = $_GET["number"];    //$result = "没有找到员工";    foreach($student as $value){        if($value["number"]==$number){                                     $result = '{"success":true,"msg":"找到学生---学生学号：'.$value["number"].            ',学生姓名：'.$value["name"].            ',学生性别：'.$value["sex"].'"}';             break;        }else{            $result = '{"success":true,"msg":"没有找到学生"}';        }            }    echo $result;}function create() {    if(!isset($_POST["name"]) || empty($_POST["name"])        || !isset($_POST["aclass"]) || empty($_POST["aclass"])            || !isset($_POST["sex"]) ||empty($_POST["sex"])){        echo '{"success":false,"msg":"参数错误"}';        return ;    }         echo '{"success":true,"msg":"学生'.$_POST["name"].'信息保存成功"}';  }?>

0 0