Maison > Article > interface Web > Comment utiliser Ajax natif pour traiter les chaînes JSON

Comment utiliser Ajax natif pour traiter les chaînes JSON

亚连original: 2018-05-23 11:33:561817parcourir

Le nom complet de JSON est Javascript Object Notation (notation d'objet javascript), qui est basée sur des littéraux d'objet javascript. Cet article présente principalement les informations pertinentes sur l'utilisation d'ajax natif pour traiter les chaînes json. Les amis dans le besoin peuvent se référer à

AJAX

AJAX = Asynchronous. Javascript et XML.

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 (notation d'objet javascript), qui est basée sur des littéraux d'objet javascript. Si vous le regardez uniquement des yeux, les données en JSON sont. stocké 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=&#39;{"name":"李明","age":21,"sex":"boy"}&#39;

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus