搜尋

首頁 >web前端 >js教程 >Ajax 傳遞JSON實例程式碼

Ajax 傳遞JSON實例程式碼

亚连
亚连原創
2018-05-22 16:35:141812瀏覽

雖然ajax全名為asynchronous javascript and XML。但目前使用ajax技術時，傳遞JSON已成為事實上的標準。這篇文章主要介紹了Ajax 傳遞JSON實例程式碼,需要的朋友可以參考下

前面的話

　　雖然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(&#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>
</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"=>&#39;总经理&#39;),
  array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>&#39;开发工程师&#39;),
  array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>&#39;产品经理&#39;)
  );
//判断如果是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[&#39;number&#39;]) || empty($_GET[&#39;number&#39;])){
    echo &#39;{"success":false,"msg":"参数错误"}&#39;;
    return;
  }
  global $staff;
  $number = test_input($_GET[&#39;number&#39;]);
  $result = &#39;{"success":false,"msg":"没有找到员工"}&#39;;
  //遍历$staff多维数组，查找key值为number的员工是否存在。如果存在，则修改返回结果
  foreach($staff as $value){
    if($value[&#39;number&#39;] == $number){
      $result = &#39;{"success":true,"msg":"找到员工：员工编号为&#39; .$value["number"] .&#39;，员工姓名为&#39; .$value["name"] .&#39;，员工性别为&#39; .$value["sex"] .&#39;，员工职位为&#39; .$value["job"] .&#39;"}&#39;;
      break;
    }
  }
  echo $result;
}
//创建员工
function create(){
  //判断信息是否填写完全
  if(!isset($_POST[&#39;name&#39;]) || empty($_POST[&#39;name&#39;]) || 
    !isset($_POST[&#39;number&#39;]) || empty($_POST[&#39;number&#39;]) ||
    !isset($_POST[&#39;sex&#39;]) || empty($_POST[&#39;sex&#39;]) ||
    !isset($_POST[&#39;job&#39;]) || empty($_POST[&#39;job&#39;]) 
    ){
    echo &#39;{"success":false,"msg":"参数错误，员工信息填写不全"}&#39;;
    return;
  }
  echo &#39;{"success":true,"msg":"员工&#39; .test_input($_POST[&#39;name&#39;]) .&#39;信息保存成功!"}&#39;;
}
?>

實例示範

#上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

Ajax的特性及亂碼問題（圖文教學）

基於Ajax的formData圖片與資料上傳

Ajax非同步請求技術實例講解

以上是Ajax 傳遞JSON實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：ajax用json實現資料傳輸下一篇：ajax用json實現資料傳輸

相關文章

看更多