recherche

Maison >interface Web >js tutoriel >Comment utiliser l'Ajax natif pour traiter les données JSON

Comment utiliser l'Ajax natif pour traiter les données JSON

php中世界最好的语言
php中世界最好的语言original
2018-04-03 11:26:123096parcourir

Cette fois, je vais vous montrer comment utiliser l'ajax natif pour traiter les données json. Quelles sont les précautions pour utiliser l'ajax natif pour traiter les données json. Voici des cas pratiques, jetons un coup d'œil.

AJAX

AJAX = JavaScript et XML asynchrones.

AJAX n'est pas un nouveau langage de programmation, mais une nouvelle façon d'utiliser les standards existants.

AJAX est l'art d'échanger des données avec un serveur et de mettre à jour des parties d'une page Web sans recharger la page entière.

Qu'est-ce que json ?

Le nom complet de JSON est Javascript Object Notation (javascript object notation), qui est basé sur javascript object littéral Si vous regardez. rien que du point de vue des yeux, les données dans JSON sont stockées entre accolades - {} Si vous analysez plus en détail le but, JSON est un format d'échange de données. JSON est organisé en interne au format nom:valeur, comme json1 ci-dessous, qui est un objet json. 

var json1={"name":"李明","age":21,"sex":"boy"}

Qu'est-ce qu'une chaîne json ?

Comme sens littéral, ajoutez des guillemets doubles (ou des guillemets simples) des deux côtés de json Afin d'éviter tout conflit avec les guillemets doubles internes, nous mettons des guillemets simples à l'extérieur, ce qui devient. un caractère json. String, comme si le JSON2 suivant 

var json2='{"name":"李明","age":21,"sex":"boy"}'

2. Fournissez une page dans nos données et sortez notre JSON Nous appelons toujours les données avec la page tigong.php

. Le code est le suivant : 

<?php
header("content-type:text/html;charset=utf-8");
echo &#39;{"name":"黎明","age":"12","sex":"男"}&#39;;
?>

3. Recevez des données sur notre page frontale, utilisez la méthode eval pour analyser la chaîne json dans un objet json et utilisez une boucle for pour la parcourir. Nous appelons cette page testJsonEvel.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript">
    window.onload=function(){
      var p1=document.getElementById("p1");
      var bt1=document.getElementById("bt1");
      bt1.onclick=function(){
        //创建ajax对象，写兼容
        if(window.XMLHttpRequest){
          var xmlHttp=new XMLHttpRequest();
        }else{
          var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        };
        //获取要发送的数据，我们这个例子没有
        //设置发送数据的地址和方法
        xmlHttp.open("POST","tigongjson.php");
        //设置我们的请求头信息
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //绑定onreadystatechange事件
        xmlHttp.onreadystatechange=function(){
          if(xmlHttp.readyState==4 && xmlHttp.status==200){
            var data=xmlHttp.responseText;
            //json字符串转换成为json对象
            data=eval("("+data+")");
            var str="";
            str+="姓名:"+data.name+"<br>";
            str+="年龄:"+data.age+"<br>";
            str+="性别:"+data.sex
            p1.innerHTML=str;
          };
        };
        //发送数据
        xmlHttp.send();
      };
    };
  </script>
  <style type="text/css">
    #p1{
      width:200px;
      height:200px;
      background:#f00;
      color:#fff;
    }
    img{
      width:200px;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <p id="p1">
    <img src="../php2/images/1.gif">
  </p>
  <br>
  <button id="bt1">点击获取json数据</button>
</body>
</html>

evel n'a pas de problèmes de compatibilité, mais il y aura des failles de sécurité.

L'effet est le suivant :

4 Utilisez la méthode JSON.parse pour analyser la chaîne json dans un objet json. testJsonParse.html, le code est le suivant 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript">
    window.onload=function(){
      var p1=document.getElementById("p1");
      var bt1=document.getElementById("bt1");
      bt1.onclick=function(){
        //创建ajax对象，写兼容
        if(window.XMLHttpRequest){
          var xmlHttp=new XMLHttpRequest();
        }else{
          var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        };
        //获取要发送的数据，我们这个例子没有
        //设置发送数据的地址和方法
        xmlHttp.open("POST","tigongjson.php");
        //设置我们的请求头信息
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //绑定onreadystatechange事件
        xmlHttp.onreadystatechange=function(){
          if(xmlHttp.readyState==4 && xmlHttp.status==200){
            var data=xmlHttp.responseText;
            //json字符串转换成为json对象
            data=JSON.parse(data);
            var str="";
            str+="姓名:"+data.name+"<br>";
            str+="年龄:"+data.age+"<br>";
            str+="性别:"+data.sex
            p1.innerHTML=str;
          };
        };
        //发送数据
        xmlHttp.send();
      };
    };
  </script>
  <style type="text/css">
    #p1{
      width:200px;
      height:200px;
      background:#f00;
      color:#fff;
    }
    img{
      width:200px;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <p id="p1">
    <img src="../php2/images/1.gif">
  </p>
  <br>
  <button id="bt1">点击获取json数据</button>
</body>
</html>

JSON.parse n'a pas de vulnérabilités de sécurité, mais il est compatible et n'est pas pris en charge par IE8 et versions antérieures.

L'effet est tel que montré sur l'image

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez. faites attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Ajax pour obtenir les données API des prévisions météorologiques nationales

Comment effectuer une vérification de formulaire ajax sur MVC+ interface d'amorçage

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：Exemple détaillé de soumission de formulaire Ajax (avec code)Article suivant：Exemple détaillé de soumission de formulaire Ajax (avec code)

Articles Liés

Voir plus