recherche

Maison  >  Article  >  interface Web  >  Comment Ajax devrait-il transmettre JSON dans des projets pratiques

Comment Ajax devrait-il transmettre JSON dans des projets pratiques

php中世界最好的语言
php中世界最好的语言original
2018-04-02 13:56:371228parcourir

Cette fois, je vais vous montrer comment Ajax doit transmettre JSON dans des projets pratiques. Quelles sont les précautions pour qu'Ajax transmette JSON dans des projets pratiques, jetons un coup d'œil.

Les mots précédents

Bien que le nom complet d'ajax soit javascript et XML asynchrone. 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('search');
//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('Microsoft.XMLHTTP');
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        var data = JSON.parse(xhr.responseText);
        if(data.success){
          document.getElementById('searchResult').innerHTML = data.msg;
        }else{
          document.getElementById('searchResult').innerHTML = '出现错误：' +data.msg;
        }
      }else{
        alert('发生错误：' + xhr.status);
      }
    }
  }
  //发送请求
  var url = 'service.php';
  url = addURLParam(url,'number',document.getElementById('keyword').value);
  xhr.open('get',url,true);
  xhr.send();
}
/*post*/
//创建
var oSave = document.getElementById('save');
//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"=>'总经理'),
  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']) .'信息保存成功!"}';
}
?>

Exemple de démonstration

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Comment échanger des données entre C et View

Étapes Ajax pour implémenter directement la fonction similaire détaillée explication

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!

php JavaScript json ajax xml
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：Série de modèles de conception JavaScript 2 : modèle SingletonArticle suivant：Série de modèles de conception JavaScript 2 : modèle Singleton

Articles Liés

Voir plus