기본 Ajax를 사용하여 json 문자열을 처리하는 방법-JS 튜토리얼-php.cn

기본 Ajax를 사용하여 json 문자열을 처리하는 방법

亚连

풀어 주다： 2018-05-23 11:33:56

원래의

1836명이 탐색했습니다.

JSON의 전체 이름은 Javascript 객체 리터럴을 기반으로 하는 Javascript Object Notation(자바스크립트 객체 표기법)입니다. 이 글에서는 기본 Ajax를 사용하여 json 문자열을 처리하는 방법에 대한 정보를 주로 소개합니다. 필요한 친구는

AJAX

AJAX = Asynchronous JavaScript and XML(비동기 JavaScript 및 XML)을 참고하세요.

AJAX는 새로운 프로그래밍 언어가 아니라 기존 표준을 사용하는 새로운 방식입니다.

AJAX는 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술입니다.

json이란 무엇인가요?

JSON의 전체 이름은 Javascript Object Notation(javascript object notation)으로, 눈으로 보면 JSON의 데이터가 중괄호 안에 저장되어 있습니다.-{} 사용되는 경우 위에서 추가로 분석한 바와 같이 JSON은 데이터 교환 형식입니다. JSON은 내부적으로 json 객체인 아래 json1과 같이 name:value 형식으로 배열되어 있습니다.

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

로그인 후 복사

json 문자열이란 무엇인가요?

문자 그대로 json의 양쪽에 큰따옴표(또는 작은따옴표)를 추가하면 내부 큰따옴표와의 충돌을 피하기 위해 외부에 작은따옴표를 넣어 다음과 같이 json 문자열이 됩니다. json2

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

로그인 후 복사

2. 데이터 제공 페이지에서 json을 출력합니다. 여전히 데이터 제공 페이지 tigong.php를 호출합니다.

코드는 다음과 같습니다.

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

로그인 후 복사

3. -end 페이지를 종료하고 eval 메소드를 사용하여 json 문자열을 json 객체로 구문 분석하고 for 루프를 사용하여 이를 탐색합니다. 우리는 이 페이지를 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이라고 부릅니다. 호환성 문제는 없지만 보안 허점이 있습니다.

효과는 그림과 같습니다:

4. JSON.parse 메서드를 사용하여 json 문자열을 json 객체로 구문 분석합니다. 코드는 다음과 같습니다.

<!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에는 보안 취약점이 없지만 호환성이 있으며 IE8 이하는 지원되지 않습니다.

효과는 사진과 같습니다