铁雪资源网 Design By www.gsvan.com
前面的话
虽然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") "value"].specified "=" + 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>
后端页面
<"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']) .'信息保存成功!"}'; } "text-align: center">以上所述是小编给大家介绍的Ajax 传递JSON实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
ajax传递json
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无Ajax 传递JSON实例代码的评论...