recherche

Maison  >  Article  >  interface Web  >  Ajax transmet l'exemple de code JSON

Ajax transmet l'exemple de code JSON

亚连
亚连original
2018-05-22 16:35:141787parcourir

Bien que le nom complet d'ajax soit javascript et XML asynchrones. Mais actuellement, lors de l'utilisation de la technologie ajax, la transmission de JSON est devenue la norme de facto. Cet article présente principalement l'exemple de code JSON de livraison Ajax. Les amis qui en ont besoin peuvent se référer aux mots précédents

Bien que le nom complet de. ajax est du javascript et du XML asynchrones. Mais actuellement, lors de l'utilisation de la technologie ajax, la transmission de JSON est devenue la norme de facto. Parce que comparé à XML, JSON est simple et pratique. Cet article réécrit l'exemple de l'article précédent pour transférer des données en JSON

Page front-end

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

Page backend 

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

Exemple de démonstration

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Fonctionnalités Ajax et problèmes de code tronqué (tutoriel graphique)

Format basé sur AjaxImage et téléchargement de données

Explication de la technologie de requête asynchrone Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：ajax utilise json pour réaliser la transmission de donnéesArticle suivant：ajax utilise json pour réaliser la transmission de données

Articles Liés

Voir plus