在實戰項目中Ajax應該如何傳遞JSON

這次帶給大家在實戰項目中Ajax應該如何傳遞JSON，在實戰項目中Ajax傳遞JSON的注意事項有哪些，下面就是實戰案例，一起來看一下。

前面的話

　　雖然ajax全名為asynchronous javascript and XML。但目前使用ajax技術時，傳遞JSON已成為事實上的標準。因為相較於XML而言，JSON簡單又方便。本文將上一篇的實例進行改寫，以JSON的方式來進行資料傳遞

#前端頁面

<!-- 前端页面 -->
nbsp;html>


<meta>
<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>


<h2 id="员工查询">员工查询</h2>  
<label>请输入员工编号:</label>
<input>
<button>查询</button>
<p></p>
<h2 id="员工创建">员工创建</h2>

  请输入员工姓名：   
  请输入员工编号：   
  请输入员工性别：      男   女   
  请输入员工职位：   
  保存  

<script> /*get*/ //查询 var oSearch = document.getElementById(&#39;search&#39;); //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(&#39;Microsoft.XMLHTTP&#39;); } //异步接受响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //实际操作 var data = JSON.parse(xhr.responseText); if(data.success){ document.getElementById(&#39;searchResult&#39;).innerHTML = data.msg; }else{ document.getElementById(&#39;searchResult&#39;).innerHTML = &#39;出现错误：&#39; +data.msg; } }else{ alert(&#39;发生错误：&#39; + xhr.status); } } } //发送请求 var url = &#39;service.php&#39;; url = addURLParam(url,&#39;number&#39;,document.getElementById(&#39;keyword&#39;).value); xhr.open(&#39;get&#39;,url,true); xhr.send(); } /*post*/ //创建 var oSave = document.getElementById(&#39;save&#39;); //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&#39;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(&#39;Microsoft.XMLHTTP&#39;); } //异步接受响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //实际操作 var data = JSON.parse(xhr.responseText); if(data.success){ document.getElementById(&#39;createResult&#39;).innerHTML = data.msg; }else{ document.getElementById(&#39;createResult&#39;).innerHTML = &#39;出现错误：&#39;+data.msg; } }else{ alert(&#39;发生错误：&#39; + xhr.status); } } } //发送请求 xhr.open(&#39;post&#39;,&#39;service.php&#39;,true); xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(serialize(document.getElementById(&#39;postForm&#39;))); } </script>

後端頁面

<?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']) .'信息保存成功!"}';
}
?>

實例示範

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

C與View之間怎麼進行資料交流

Ajax直接實作讚功能步奏詳解

以上是在實戰項目中Ajax應該如何傳遞JSON的詳細內容。更多資訊請關注PHP中文網其他相關文章！