suchen

Heim  >  Artikel  >  Web-Frontend  >  Ajax übergibt JSON-Beispielcode

Ajax übergibt JSON-Beispielcode

亚连
亚连Original
2018-05-22 16:35:141787Durchsuche

Obwohl der vollständige Name von Ajax asynchrones Javascript und XML ist. Aber derzeit ist die Übergabe von JSON beim Einsatz der Ajax-Technologie zum De-facto-Standard geworden. In diesem Artikel wird hauptsächlich der JSON-Beispielcode für die Ajax-Lieferung vorgestellt. Freunde, die ihn benötigen, können auf die vorherigen Wörter verweisen

Obwohl der vollständige Name von Ajax ist asynchrones Javascript und XML. Aber derzeit ist die Übergabe von JSON beim Einsatz der Ajax-Technologie zum De-facto-Standard geworden. Denn im Vergleich zu XML ist JSON einfach und bequem. In diesem Artikel wird das Beispiel im vorherigen Artikel neu geschrieben, um Daten in JSON

Front-End-Seite 

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

Terminal-Seite

<?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;;
}
?>

Beispieldemonstration

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Ajax-Funktionen und Probleme mit verstümmeltem Code (grafisches Tutorial)

Ajax-basiertes Formular, Datenbild und Daten-Upload

Erläuterung der asynchronen Ajax-Anfragetechnologie

Das obige ist der detaillierte Inhalt vonAjax übergibt JSON-Beispielcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ajax verwendet JSON, um die Datenübertragung zu realisierenNächster Artikel：Ajax verwendet JSON, um die Datenübertragung zu realisieren

In Verbindung stehende Artikel

Mehr sehen