Json完成ajax异步局部更新

来源：互联网发布：g900 mac 编辑：程序博客网时间：2024/06/05 03:36

JSON：JavaScript对象表示法（JavaScript Object Notation）
JSON是存储和交换文本信息的语法，类似XML，它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成。
JSON是独立于语言的，也就是说不管什么语言，都可以解析JSON，只需要按照Json的规则来就行。

JSON与XML比较
Json的长度和xml格式比起来很短小

Json读写的速度更快。

Json可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便。

Json校验：
Jsonlint.Com

XMLHttpRequestJson.html

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Demo</title><style>body, input, select, button, h1 {font-size: 28px;line-height:1.7;}</style></head><body><h1>员工查询</h1><label>请输入员工编号：</label><input type="text" id="keyword" /><button id="search">查询</button><p id="searchResult"></p><h1>员工新建</h1><label>请输入员工姓名：</label><input type="text" id="staffName" /><br><label>请输入员工编号：</label><input type="text" id="staffNumber" /><br><label>请选择员工性别：</label><select id="staffSex"><option>女</option><option>男</option></select><br><label>请输入员工职位：</label><input type="text" id="staffJob" /><br><button id="save">保存</button><p id="createResult"></p><script>document.getElementById("search").onclick = function() { var request = new XMLHttpRequest();request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").value);request.send();request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) { var data = JSON.parse(request.responseText);if (data.success) { document.getElementById("searchResult").innerHTML = data.msg;} else {document.getElementById("searchResult").innerHTML = "出现错误：" + data.msg;}} else {alert("发生错误：" + request.status);}} }}document.getElementById("save").onclick = function() { var request = new XMLHttpRequest();request.open("POST", "serverjson.php");var data = "name=" + document.getElementById("staffName").value                   + "&number=" + document.getElementById("staffNumber").value                   + "&sex=" + document.getElementById("staffSex").value                   + "&job=" + document.getElementById("staffJob").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) { document.getElementById("createResult").innerHTML = data.msg;} else {document.getElementById("createResult").innerHTML = "出现错误：" + data.msg;}} else {alert("发生错误：" + request.status);}} }}</script></body></html>

Serverjson.php

<?php//设置页面内容是html编码格式是utf-8header("Content-Type: text/plain;charset=utf-8"); //header("Content-Type: application/json;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"); //定义一个多维数组，包含员工的信息，每条员工信息为一个数组$staff = array(array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理"));//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法if ($_SERVER["REQUEST_METHOD"] == "GET") {search();} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){create();}//通过员工编号搜索员工function search(){//检查是否有员工编号的参数//isset检测变量是否设置；empty判断值为否为空//超全局变量 $_GET 和 $_POST 用于收集表单数据if (!isset($_GET["number"]) || empty($_GET["number"])) {echo '{"success":false,"msg":"参数错误"}';return;}//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。//global 关键词用于访问函数内的全局变量global $staff;//获取number参数$number = $_GET["number"];$result = '{"success":false,"msg":"没有找到员工。"}';//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果foreach ($staff as $value) {if ($value["number"] == $number) {$result = '{"success":true,"msg":"找到员工：员工编号：' . $value["number"] . '，员工姓名：' . $value["name"] . '，员工性别：' . $value["sex"] . '，员工职位：' . $value["job"] . '"}';break;}}    echo $result;}//创建员工function create(){//判断信息是否填写完全if (!isset($_POST["name"]) || empty($_POST["name"])|| !isset($_POST["number"]) || empty($_POST["number"])|| !isset($_POST["sex"]) || empty($_POST["sex"])|| !isset($_POST["job"]) || empty($_POST["job"])) {echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';return;}//TODO: 获取POST表单数据并保存到数据库//提示保存成功echo '{"success":true,"msg":"员工：' . $_POST["name"] . ' 信息保存成功！"}';}?>

0 0