So verwenden Sie natives Ajax zur Verarbeitung von JSON-Strings-js-Tutorial-php.cn

So verwenden Sie natives Ajax zur Verarbeitung von JSON-Strings

亚连

Freigeben： 2018-05-23 11:33:56

Original

1860 Leute haben es durchsucht

Der vollständige Name von JSON lautet Javascript Object Notation (Javascript Object Notation), die auf Javascript-Objektliteralen basiert. In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von nativem Ajax zur Verarbeitung von JSON-Zeichenfolgen vorgestellt. Freunde in Not können sich auf

AJAX

AJAX = Asynchronous beziehen JavaScript und XML.

AJAX ist keine neue Programmiersprache, sondern eine neue Art, bestehende Standards zu nutzen.

AJAX ist die Kunst, Daten mit einem Server auszutauschen und Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden.

Was ist JSON?

Der vollständige Name von JSON ist Javascript Object Notation (Javascript Object Notation), das auf Javascript-Objektliteralen basiert. Wenn Sie es nur aus der Perspektive betrachten, sind die Daten in JSON in geschweiften Klammern gespeichert -- {}, wenn Sie den Zweck genauer analysieren, ist JSON ein Datenaustauschformat. JSON ist intern im Format Name:Wert angeordnet, z. B. json1 unten, bei dem es sich um ein JSON-Objekt handelt.

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

Nach dem Login kopieren

Was ist ein JSON-String?

Fügen Sie als wörtliche Bedeutung doppelte Anführungszeichen (oder einfache Anführungszeichen) auf beiden Seiten von json hinzu. Um Konflikte mit den internen doppelten Anführungszeichen zu vermeiden, setzen wir einfache Anführungszeichen außen eine JSON-Zeichenfolge, wie zum Beispiel die folgende json2

var json2=&#39;{"name":"李明","age":21,"sex":"boy"}&#39;

Nach dem Login kopieren

2. Auf unserer Datenbereitstellungsseite rufen wir weiterhin die Datenbereitstellungsseite tigong.php auf >

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

Nach dem Login kopieren

>3. Daten empfangen am Verwenden Sie auf unserer Front-End-Seite die Methode eval, um die JSON-Zeichenfolge in ein JSON-Objekt zu analysieren, und verwenden Sie eine for-Schleife, um sie zu durchlaufen. Wir nennen diese Seite 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>

Nach dem Login kopieren

evel hat keine Kompatibilitätsprobleme, aber es wird Sicherheitslücken geben.

Der Effekt ist wie folgt:

4. Verwenden Sie die JSON.parse-Methode, um die JSON-Zeichenfolge in ein JSON-Objekt zu analysieren testJsonParse.html, der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

JSON.parse weist keine Sicherheitslücken auf, ist jedoch kompatibel und wird von IE8 und niedriger nicht unterstützt.

Der Effekt ist wie im Bild gezeigt

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

Verwandte Artikel:

Sprechen Sie über die Ansichten und das Verständnis der Ajax-Formularübermittlung

Ein Beispiel für das Schreiben einer Karte über Datenbank und Ajax Methodencode

Ajax ruft Daten nach Städtenamen ab

Das obige ist der detaillierte Inhalt vonSo verwenden Sie natives Ajax zur Verarbeitung von JSON-Strings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!