Ajax 传递JSON实例代码

虽然ajax全称是asynchronous javascript and xml。但目前使用ajax技术时，传递json已经成为事实上的标准。这篇文章主要介绍了ajax 传递json实例代码,需要的朋友可以参考下

前面的话

　　虽然ajax全称是asynchronous javascript and XML。但目前使用ajax技术时，传递JSON已经成为事实上的标准。因为相较于XML而言，JSON简单且方便。本文将上一篇中的实例进行改写，以JSON的方式来进行数据传递

前端页面

nbsp;html>body{font-size: 20px;margin: 0;line-height: 1.5;}select,button,input{font-size: 20px;line-height: 1.5;}
员工查询
  请输入员工编号:查询
员工创建

登录后复制

/*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')));}

后端页面

"洪七","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的特性及乱码问题（图文教程）

基于Ajax的formData图片和数据上传

Ajax异步请求技术实例讲解

以上就是Ajax 传递JSON实例代码的详细内容，更多请关注【创想鸟】其它相关文章！