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

So verwenden Sie natives Ajax zur Verarbeitung von JSON-Daten

php中世界最好的语言

Freigeben： 2018-04-03 11:26:12

Original

3040 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie natives Ajax zur Verarbeitung von JSON-Daten verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von nativem Ajax zur Verarbeitung von JSON-Daten?

AJAX

AJAX = Asynchrones 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), der auf Javascript Object Literal basiert Aus reiner Sicht werden die Daten in JSON in geschweiften Klammern gespeichert - {}. Wenn Sie den Zweck weiter 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 ein JSON-Zeichen. String, als ob der folgende JSON2

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

Nach dem Login kopieren

2. Geben Sie eine Seite in unseren Daten an und geben Sie unseren JSON aus. Wir rufen die Daten weiterhin mit der Seite tigong.php

auf Der Code lautet wie folgt:

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

Nach dem Login kopieren

3. Empfangen Sie Daten auf unserer Front-End-Seite, analysieren Sie den JSON-String mit der Eval-Methode in ein JSON-Objekt und durchlaufen Sie ihn mit einer for-Schleife. 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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax zum Abrufen nationaler Wettervorhersage-API-Daten

So führen Sie eine Ajax-Formularüberprüfung auf MVC+ durch Bootstrap-Schnittstelle

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