jquery의 jQuery.ajax() 함수 사용 예에 ​​대한 자세한 설명

jQuery.ajax() 함수는 jQuery로 캡슐화된 AJAX 기술을 구현한 것입니다. 이 함수를 통해 현재 페이지를 새로 고치지 않고도 원격 서버에서 데이터를 얻을 수 있습니다. 백그라운드 HTTP 요청을 통해 원격 데이터를 로드하는 데 사용됩니다.

jQuery.ajax() 함수는 jQuery의 기본 AJAX 구현입니다. jQuery.get(), jQuery.post(), load(), jQuery.getJSON(), jQuery.getScript() 및 기타 함수는 모두 이 함수를 단순화한 형태입니다(모두 이 함수를 호출하지만 매개변수 설정이 다릅니다). 또는 약간의 차이가 있음).

이 함수는 전역 jQuery 개체에 속합니다(정적 함수로도 이해될 수 있음).

Syntax

jQuery 1.0에는 이 정적 함수가 추가되었습니다. jQuery.ajax() 함수에는 다음 두 가지 사용법이 있습니다.

Usage 1:

jQuery.ajax( [ settings ] ] )

Usage 2: jQuery 1.5에서는 이 사용법을 새로 지원합니다.

jQuery.ajax( url [, settings ] ] )

Usage 2는 Usage 1의 변형입니다. 단지 매개변수 객체 설정의 선택적 속성 url을 독립된 매개변수로 추출합니다.

Parameters

이전 구문 섹션에 정의된 매개변수 이름에 따라 해당 매개변수를 찾으세요.

url 문자열 형식 URL 요청string.

settings 선택 사항/Object 클래스 Object 개체를 입력합니다. 각 속성은 요청을 보내는 데 필요한 추가 매개변수 설정을 지정하는 데 사용됩니다. 매개변수 설정은 개체입니다.

반환 값

jQuery.ajax()함수의 반환 값은 현재 요청의 jqXHR 개체를 반환하는 jqXHR 유형입니다(jQuery 1.4 및 이전 버전은 기본 XMLHttpRequest 개체를 반환함).

예제 코드 설명:

jQuery.ajax()에 매개변수가 지정되지 않으면 기본적으로 현재 페이지가 요청되며 반환된 데이터는 처리되지 않습니다.

jQuery.ajax() 함수의 설정 개체에서 일반적으로 사용되는 속성은 url, type, async, data, dataType, Success, error, Complete, beforeSend, timeout 등입니다.

아래 초기 HTML 코드를 참고하세요.

<div id="content"></div>

다음은 jQuery.ajax() 함수의 구체적인 사용법을 보여주는 jQuery.ajax() 함수와 관련된 jQuery 샘플 코드입니다.

$.ajax({
     url: "jquery_ajax.php"
    , type: "POST"
    , data: "name=codeplayer&age=18"
    , success: function( data, textStatus, jqXHR ){
        // data 是返回的数据
        // textStatus 可能为"success"、"notmodified"等
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        alert("返回的数据" + data);
    }
});

$.ajax({
     url: "jquery_ajax.php?page=1&id=3"
    , type: "POST"
    // jQuery会自动将对象数据转换为 "name=codeplayer&age=18&uid=1&uid=2&uid=3"
    , data: { name:"codeplayer", age:18, uid: [1, 2, 3] }
    // 请求成功时执行
    , success: function( data, textStatus, jqXHR ){
        alert("返回的数据" + data);
    }
    // 请求失败时执行
    , error: function(jqXHR, textStatus, errorMsg){
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为： null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能为： "Not Found"、"Internal Server Error"等
        alert("请求失败：" + errorMsg);
    }
});

// 将url单独提取出来作为第一个参数(jQuery 1.5+才支持)
$.ajax("jquery_ajax.php?action=type&id=3", {
     dataType: "json" // 返回JSON格式的数据
    , success: function( data, textStatus, jqXHR ){
        // 假设返回的字符串数据为{ "name": "CodePlayer", age: 20 }
        // jQuery已帮我们将该JSON字符串转换为对应的JS对象，可以直接使用
        alert( data.name ); // CodePlayer
    }   
});

$.ajax( {
    // 注意这里有个参数callback=?
     url: "http://cross-domain/jquery_ajax.php?name=Jim&callback=?&age=21"
    , async: false // 同步请求，发送请求后浏览器将被锁定，只有等到该请求完成(无论成功或失败)后，用户才能操作，js代码才会继续执行
    , dataType: "jsonp" // 返回JSON格式的数据
    , success: function( data, textStatus, jqXHR ){
        // 假设返回的字符串数据为{ "site_name": "CodePlayer", "site_desc": "专注于编程开发技术分享" }
        // jQuery已帮我们将该JSON字符串转换为对应的JS对象，可以直接使用
        alert( data.site_desc ); // 专注于编程开发技术分享
    }   
});

$.ajax( {
    // 加载指定的js文件到当前文档中
     url: "http://code.jquery.com/jquery-1.8.3.min.js"
    , dataType: "script"
});

위 내용은 jquery의 jQuery.ajax() 함수 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!