您的位置：首页 > Web前端 > JavaScript

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

2015-05-14 11:00 495 查看

<!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>

<?php
header("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"].'信息保存成功"}';

}
?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： json ajax 原生js

相关文章推荐

新的分享

章节导航