深入理解ajax系列第七篇
Posted 于继海
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深入理解ajax系列第七篇相关的知识，希望对你有一定的参考价值。
前面的话
虽然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-8
header("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系列第七篇的主要内容，如果未能解决你的问题，请参考以下文章
Docker系列-第七篇Docker构建SpringBoot应用