How to use native ajax to process json strings-JS Tutorial-php.cn

How to use native ajax to process json strings

亚连

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

Original

1806 people have browsed it

The full name of JSON is Javascript Object Notation (javascript object notation), which is based on javascript object literals. This article mainly introduces the relevant information about using native ajax to process json strings. Friends in need can refer to

AJAX

##AJAX = Asynchronous JavaScript and XML.

AJAX is not a new programming language, but a new way of using existing standards.

AJAX is the art of exchanging data with a server and updating parts of a web page without reloading the entire page.

What is json?

The full name of JSON is Javascript Object Notation (javascript object notation), which is based on javascript object literals. If you look at it with your eyes, the data in JSON is stored in curly brackets. -- {}, if you further analyze the purpose, JSON is a data exchange format. JSON is internally arranged in the format of name:value, such as json1 below, which is a json object.

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

Copy after login

What is a json string?

As its literal meaning, add double quotes (or single quotes) to both sides of json. In order to avoid conflict with the internal double quotes, we put single quotes outside, which becomes a json character. string, such as the following json2

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

Copy after login

2. In our data supply page, output our json, we still call the data supply page tigong.php

The code is as follows:

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

Copy after login

3. Receive data on our front-end page, use the eval method to parse the json string into a json object, and use a for loop to traverse it. We call this 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>

Copy after login

evel does not have compatibility issues, but there will be security holes.

The effect is as shown:

4. Use the JSON.parse method to parse the json string into a json object. We call this page testJsonParse. html, the code is as follows

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

Copy after login

JSON.parse does not have security vulnerabilities, but it will have compatibility and is not supported by IE8 and below.

The effect is as shown

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Talk about the views and understanding of Ajax form submission

An example of writing a map through the database and ajax method Code

Ajax gets data through city name

The above is the detailed content of How to use native ajax to process json strings. For more information, please follow other related articles on the PHP Chinese website!