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

집

웹 프론트엔드

JS 튜토리얼

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

亚连

May 23, 2018 am 11:33 AM

ajax javascript json

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 이하는 지원되지 않습니다.

효과는 사진과 같습니다

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7688

자바 튜토리얼

1639

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1229

Related knowledge

PHP 배열을 JSON으로 변환하기 위한 성능 최적화 팁 May 04, 2024 pm 06:15 PM

PHP 배열을 JSON으로 변환하기 위한 성능 최적화 방법은 다음과 같습니다. JSON 확장 및 json_encode() 함수를 사용하여 문자 이스케이프를 방지하고 버퍼를 사용하여 JSON 인코딩 결과 캐싱을 고려합니다. JSON 인코딩 라이브러리.

PHP 및 Ajax: 자동 완성 제안 엔진 구축 Jun 02, 2024 pm 08:39 PM

PHP 및 Ajax를 사용하여 자동 완성 제안 엔진 구축: 서버측 스크립트: Ajax 요청을 처리하고 제안을 반환합니다(autocomplete.php). 클라이언트 스크립트: Ajax 요청을 보내고 제안을 표시합니다(autocomplete.js). 실제 사례: HTML 페이지에 스크립트를 포함하고 검색 입력 요소 식별자를 지정합니다.

Jackson 라이브러리의 주석은 JSON 직렬화 및 역직렬화를 어떻게 제어합니까? May 06, 2024 pm 10:09 PM

Jackson 라이브러리의 주석은 JSON 직렬화 및 역직렬화를 제어합니다. 직렬화: @JsonIgnore: 속성 무시 @JsonProperty: 이름 지정 @JsonGetter: get 메서드 사용 @JsonSetter: set 메서드 사용 역직렬화: @JsonIgnoreProperties: @JsonProperty 속성 무시: 이름 지정 @JsonCreator: 생성자 사용 @JsonDeserialize: 사용자 정의 논리

PHP에 대한 심층적인 이해: JSON 유니코드를 중국어로 변환하는 구현 방법 Mar 05, 2024 pm 02:48 PM

PHP에 대한 심층적인 이해: JSONUnicode를 중국어로 변환하는 구현 방법 개발 중에 JSON 데이터를 처리해야 하는 상황이 자주 발생하며, JSON의 유니코드 인코딩은 일부 시나리오, 특히 변환해야 할 때 몇 가지 문제를 일으킬 수 있습니다. 유니코드 인코딩을 한자로 변환하는 경우입니다. PHP에는 이러한 변환 프로세스를 달성하는 데 도움이 되는 몇 가지 방법이 아래에 소개되고 구체적인 코드 예제가 제공됩니다. 먼저 JSON의 Un을 먼저 이해해 봅시다.

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Mar 09, 2024 pm 05:36 PM

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.

PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션 Jun 06, 2024 pm 01:12 PM

Ajax(비동기 JavaScript 및 XML)를 사용하면 페이지를 다시 로드하지 않고도 동적 콘텐츠를 추가할 수 있습니다. PHP와 Ajax를 사용하면 제품 목록을 동적으로 로드할 수 있습니다. HTML은 컨테이너 요소가 있는 페이지를 생성하고 Ajax 요청은 로드한 후 요소에 데이터를 추가합니다. JavaScript는 Ajax를 사용하여 XMLHttpRequest를 통해 서버에 요청을 보내 서버에서 JSON 형식의 제품 데이터를 얻습니다. PHP는 MySQL을 사용하여 데이터베이스에서 제품 데이터를 쿼리하고 이를 JSON 형식으로 인코딩합니다. JavaScript는 JSON 데이터를 구문 분석하여 페이지 컨테이너에 표시합니다. 버튼을 클릭하면 제품 목록을 로드하라는 Ajax 요청이 트리거됩니다.

PHP 배열을 JSON으로 변환하기 위한 빠른 팁 May 03, 2024 pm 06:33 PM

PHP 배열은 json_encode() 함수를 통해 JSON 문자열로 변환할 수 있으며(예: $json=json_encode($array);), 반대로 json_decode() 함수를 사용하면 JSON에서 배열로 변환할 수 있습니다($array= json_decode($json);) . 다른 팁에는 심층 변환 방지, 사용자 정의 옵션 지정 및 타사 라이브러리 사용이 포함됩니다.

PHP 함수를 사용하여 JSON 데이터를 처리하는 방법은 무엇입니까? May 04, 2024 pm 03:21 PM

PHP는 JSON 데이터를 처리하기 위해 다음 기능을 제공합니다. JSON 데이터 구문 분석: json_decode()를 사용하여 JSON 문자열을 PHP 배열로 변환합니다. JSON 데이터 생성: json_encode()를 사용하여 PHP 배열 또는 개체를 JSON 문자열로 변환합니다. JSON 데이터의 특정 값 가져오기: PHP 배열 함수를 사용하여 키-값 쌍 또는 배열 요소와 같은 특정 값에 액세스합니다.

See all articles

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

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제