> 웹 프론트엔드 > JS 튜토리얼 > jquery를 사용하여 json 데이터 코드 세부 정보를 반환하는 ajax 비동기 요청을 구현하는 방법

jquery를 사용하여 json 데이터 코드 세부 정보를 반환하는 ajax 비동기 요청을 구현하는 방법

伊谢尔伦
풀어 주다: 2017-07-21 14:47:53
원래의
1813명이 탐색했습니다.

jquery의 비동기 ajax 요청 수신 및 json 데이터 반환 방법은 설정이 간단합니다. 하나는 서버 핸들러가 json 데이터를 반환하고, 다른 하나는 ajax 전송 설정의 데이터 유형이 jsonp 형식 데이터 또는 json 형식으로 설정된다는 것입니다.

코드 예시는 다음과 같습니다.

$('#send').click(function () {
    $.ajax({
        type : "GET",
        url : "a.php",
        dataType : "jsonp",
        success : function (data) {
            $.each(data.items, function (i, item) {
                $("<img class=&#39;para&#39;/> ").attr("src", item.media.m).appendTo("#resText");
                if (i == 3) {
                    return false;
                }
            });
        }
    });
});
로그인 후 복사

$.ajax 메소드는 다음과 같습니다.

$.ajax({ 
   type: "POST",
   url:  ctxRoot+&#39;FolderAction!saveInformSetting.action&#39;,
   data: &#39;jsonStr=&#39; + inform_settingListStr,
   dataType: "json",
   complete: function(data){
       //在这里做些事情,假设返回的json数据里有name这个属性
       //有时候可以直接data.name或者data[&#39;name&#39;]去访问
       //但有时候,却要通过var jsonData = eval("("+data.responseText+")");才可以通过jsonData.name访问,而且这种情况下,需要是complete而不是success
   }
   });
$.ajax(options)
로그인 후 복사

이것은 요청 정보와 콜백 함수 정보를 포함하는 매개변수 옵션이 하나만 있는 가장 기본적인 JQuery Ajax 메소드입니다. 매개변수 내용은 모두 키:값 쌍 형식이며 모두 선택사항입니다.

구문은 다음과 같습니다:

$.ajax({options});
url: (문자열) 요청을 보낼 주소(서버 페이지 또는 WebService 작업일 수 있음).
type: (문자열) 요청 방법, POST 또는 GET
data: (객체) 서버에 요청을 보낼 때 가져온 데이터. 이는 키:값 쌍 형식입니다(예: {name:"grayworm",sex:"male"}, 배열 {works:["work1","work2"]}
dataType: ( 문자열) 예상 반환 데이터 유형입니다. xml, html, json, text 등
beforeSend: ajax 요청을 보내기 전에 (함수)가 트리거됩니다. false가 반환되면 요청이 취소됩니다. 비동기 요청이 gif 애니메이션을 표시해야 하는 경우 해당 의 가시성을 여기에서 설정해야 합니다.

위 내용은 jquery를 사용하여 json 데이터 코드 세부 정보를 반환하는 ajax 비동기 요청을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿