How should Ajax pass JSON in actual projects

This time I will show you how Ajax should transmit JSON in actual projects. What are the precautions for Ajax to transmit JSON in actual projects. The following is a practical case, let's take a look.

The previous words

Although the full name of ajax is asynchronous javascript and XML. But currently when using ajax technology, passing JSON has become the de facto standard. Because compared to XML, JSON is simple and convenient. This article rewrites the example in the previous article and uses JSON to transfer data

Front-end page

<!-- 前端页面 -->
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>

Terminal page

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

Example Demonstration

I believe you have mastered the method after reading the case in this article, please come for more exciting information Pay attention to other related articles on php Chinese website!

Recommended reading:

How to communicate data between C and View

Ajax steps to directly implement the like function Detailed explanation

The above is the detailed content of How should Ajax pass JSON in actual projects. For more information, please follow other related articles on the PHP Chinese website!