前面的话
虽然ajax全称是asynchronous javascript and XML。但目前使用ajax技术时，传递JSON已经成为事实上的标准。因为相较于XML而言，JSON简单且方便。本文将上一篇中的实例进行改写，以JSON的方式来进行数据传递
前端页面
<!-- 前端页面 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{
font-size: 20px;
margin: 0;
line-height: 1.5;
}
select,button,input{
font-size: 20px;
line-height: 1.5;
}
</style></head><body><h2>员工查询</h2> <label>请输入员工编号:</label><input type="text" id="keyword"><button id="search">查询</button><p id="searchResult"></p><h2>员工创建</h2><form id="postForm"> <label>请输入员工姓名：</label> <input type="text" name="name"><br> <label>请输入员工编号：</label> <input type="text" name="number"><br> <label>请输入员工性别：</label> <select name="sex"> <option value="男">男</option> <option value="女">女</option> </select><br> <label>请输入员工职位：</label> <input type="text" name="job"><br> <button id="save" type="button">保存</button> </form><p id="createResult"></p><script>/*get*///查询var oSearch = document.getElementById('search');
//get方式添加数据function addURLParam(url,name,value){
url += (url.indexOf("?") == -1 ? "?" : "&");
url +=encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
oSearch.onclick = function(){
//创建xhr对象 var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步接受响应 xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//实际操作 var data = JSON.parse(xhr.responseText);
if(data.success){
document.getElementById('searchResult').innerHTML = data.msg;
}
else{
document.getElementById('searchResult').innerHTML = '出现错误：' +data.msg;
}
}
else{
alert('发生错误：' + xhr.status);
}
}
}
//发送请求 var url = 'service.php';
url = addURLParam(url,'number',document.getElementById('keyword').value);
xhr.open('get',url,true);
xhr.send();
}
/*post*///创建var oSave = document.getElementById('save');
//post方式添加数据function serialize(form){
var parts = [],field = null,i,len,j,optLen,option,optValue;
for (i=0, len=form.elements.length;
i < len;
i++){
field = form.elements[i];
switch(field.type){
case "select-one": case "select-multiple": if (field.name.length){
for (j=0, optLen = field.options.length;
j < optLen;
j++){
option = field.options[j];
if (option.selected){
optValue = "";
if (option.hasAttribute){
optValue = (option.hasAttribute("value") ? option.value : option.text);
}
else {
optValue = (option.attributes["value"].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break;
case undefined: //fieldset case "file": //file input case "submit": //submit button case "reset": //reset button case "button": //custom button break;
case "radio": //radio button case "checkbox": //checkbox if (!field.checked){
break;
}
/* falls through */ default: //don't include form fields without names if (field.name.length){
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}
oSave.onclick = function(){
//创建xhr对象 var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步接受响应 xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//实际操作 var data = JSON.parse(xhr.responseText);
if(data.success){
document.getElementById('createResult').innerHTML = data.msg;
}
else{
document.getElementById('createResult').innerHTML = '出现错误：'+data.msg;
}
}
else{
alert('发生错误：' + xhr.status);
}
}
}
//发送请求 xhr.open('post','service.php',true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(serialize(document.getElementById('postForm')));
}
</script></body></html>
后端页面
<?php //用于过滤不安全的字符function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
//设置页面内容的html编码格式是utf-8header("Content-Type:application/json;
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["REQUEST_METHOD"]返回访问页面使用的请求方法if($_SERVER["REQUEST_METHOD"] == "GET"){
search();
}
else if($_SERVER["REQUEST_METHOD"] == "POST"){
create();
}
//通过员工编号搜索员工function search(){
//检查是否有员工编号的参数 //isset检测变量是否设置；empty判断值是否为空 if(!isset($_GET['number']) || empty($_GET['number'])){
echo '{
"success":false,"msg":"参数错误"}
';
return;
}
global $staff;
$number = test_input($_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;
}
echo '{
"success":true,"msg":"员工' .test_input($_POST['name']) .'信息保存成功!"}
';
}
?>
实例演示
以上所述是小编给大家介绍的Ajax 传递JSON实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
