Jquery_jquery의 $.get(),$.post(),$.ajax(),$.getJSON() 사용법 요약

각 Jquery Ajax 함수의 자세한 해석:
$.get(), $.post(), $.ajax(), $.getJSON()

1, $.get(url,[data],[콜백])

설명: url은 요청 주소, data는 요청된 데이터 목록, callback은 요청 성공 후의 콜백 함수입니다. 이 함수는 두 개의 매개변수를 받습니다. 첫 번째는 서버에서 반환되는 데이터이고 두 번째는입니다. 매개변수는 서버의 상태이며 선택적 매개변수입니다.

그 중 서버에서 반환하는 데이터의 형식은 실제로는 문자열 형식으로, 이는 우리가 원하는 json 데이터 형식이 아니며 단지 비교 및 ​​설명을 위해 인용한 것입니다

코드 복사 코드는 다음과 같습니다.

$.get("data.php",$("#firstName. val()"),함수(데이터){

$("#getResponse").html(data) }//반환된 데이터는 문자열 유형입니다

);

2, $.post(url,[data],[callback],[type])

설명: 이 함수는 $.get() 매개변수와 유사하며 추가 유형 매개변수는 html, xml, json 등이 될 수 있는 요청된 데이터 유형입니다. 이 매개변수를 json으로 설정하면 , 형식은 json 형식입니다. 설정되지 않은 경우 $.get()에서 반환된 형식과 동일하며 문자열

코드 복사 코드는 다음과 같습니다:

$.post("data.php",$("#firstName.val()"),function (데이터){
$("#postResponse").html(data.name);

},"json"//얻는 데이터의 형식이 설정되어 있으므로, 얻는 데이터 형식은 json 형식입니다

);

3개, $.ajax(opiton) 참고: $.ajax() 함수는 강력하며 ajax를 정확하게 제어할 수 있습니다. 자세한 설명이 필요한 경우 관련 정보를 참조하세요

코드 복사 코드는 다음과 같습니다.

$.ajax({
url: "ajax/ajax_selectPicType.aspx",

데이터:{전체:"fu"},

유형: "POST",

데이터 유형:'json',

성공:콜백,

오류:기능(er){

뒤로Err(er);}

});

4, $.getJSON(url,[data],[callback])

코드 복사 코드는 다음과 같습니다.

$.getJSON("data.php",$("#firstName. val() "),function(jsonData){
$("#getJSONResponse").html(jsonData.id);}//설정이 필요 없으며 직접 얻은 데이터 유형은 json이므로

호출 시 jsonData.id 메서드를 사용해야 합니다

);

Ajax가 jQuery를 만났을 때 AJAX 기반 애플리케이션이 점점 더 많아지고 있으며, 프론트 엔드 개발자에게는 기본 HTTPRequest 문제를 직접 처리하는 것이 즐겁지 않습니다. jQuery는 JavaScript를 캡슐화하므로 AJAX 애플리케이션을 고려해야 합니다. 실제로 jQuery를 사용하여 AJAX를 작성하면 JS에서 직접 작성하는 것보다 N배 더 편리할 것입니다. (JQuery를 오랫동안 사용하다 보면 JS에 대한 지식을 잃게 될지 궁금합니다...) 여기서는 모두가 jQuery 구문에 익숙하다고 가정하고 Ajax의 몇 가지 응용 프로그램을 요약해 보겠습니다.

정적 페이지 로드

load( url, [data], [callback] );

url (String) 요청된 HTML 페이지의 URL 주소
data (Map) (선택적 매개변수) 서버로 전송되는 키/값 데이터
콜백(Callback)(선택적 매개변수) 요청 완료 시 콜백 함수(성공할 필요는 없음)

load() 메서드는 정적 페이지 콘텐츠를 지정된 jQuery 객체로 쉽게 로드할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$('#ajax-div') .load( 'data.html');

이런 방식으로 data.html의 콘텐츠가 ID ajax-div를 사용하여 DOM 개체에 로드됩니다. 다음과 같이 ID를 지정하여 콘텐츠의 일부를 로드하는 Ajax 작업을 구현할 수도 있습니다.

코드 복사 코드

$('#ajax-div').load('data.html#my-section');


GET 및 POST 메소드 구현

get( url, [data], [callback] )
url(String) 요청을 보낼 URL 주소.
data(Map)(선택 매개변수) 서버로 보낼 데이터, with Key/ value의 키-값 쌍 형식은 로드가 성공할 때 QueryString
콜백(Callback)(선택적 매개변수) 콜백 함수로 요청 URL에 추가됩니다(이 메소드는 Response의 반환 상태가 다음인 경우에만 호출됩니다). 성공)

분명히 이것은 GET 메소드를 구체적으로 구현한 함수이고 사용이 매우 간단합니다.

코드를 복사하세요 코드는 다음과 같습니다:

$.get('login.php', {
id : 'Robin',
비밀번호 : '123456',
Gate : 'index '
} , function(data, status) {
//data는 반환 객체, status는 요청 상태
Alert(data);
//이때, 서버 스크립트가 "Hello, Robin !"이라는 텍스트를 반환할 것이라고 가정합니다.
그런 다음 브라우저는 대화 상자를 팝업하여 텍스트를 표시합니다
Alert(status);
//결과는 성공입니다. 오류 등이 발생하는데 성공했을 때만 실행할 수 있는 함수는 다음과 같습니다
});

post( url, [data], [callback], [type] )

url(문자열) 요청을 보낼 URL 주소입니다.
data(Map)(선택적 매개변수) 서버로 보낼 데이터로, 키/값 쌍의 형태로 표현됩니다.
callback(콜백) (선택변수) 로딩 성공 시 콜백 함수(Response의 반환 상태가 성공인 경우에만 호출되는 메소드)
type (String) (선택변수) 요청한 데이터의 종류, xml, text, json 등

역시 jQuery에서 제공하는 간단한 함수입니다. 사용법은

코드 복사 코드는 다음과 같습니다.

$.post('regsiter.php', {
id:'Robin',
비밀번호: '123456',
유형:'user'
},function( data, status) {
Alert(data);
}, "json");

이벤트 기반 스크립트 로딩 함수: getScript()

getScript( url, [callback] )
url(String) 로드할 JS 파일 주소
callback(함수)(선택) 로드 성공 후 콜백 함수

getScript() 함수는 JavaScript 스크립트를 원격으로 로드하고 실행할 수 있습니다. 이 기능은 여러 도메인에 걸쳐 JS 파일을 로드할 수 있습니다(마법...?!). 이 기능은 페이지 초기화 시 해당 JS 파일을 모두 로드하는 대신 사용자 상호작용을 기반으로 해당 JS 파일을 로드할 수 있기 때문에 페이지 초기 로드 시 코드 양을 크게 줄일 수 있다는 점에서 매우 중요합니다.

코드 복사 코드는 다음과 같습니다.

$.getScript('ajaxEvent.js' , function( ) {
Alert("Scripts Loaded!");
//ajaxEvent.js를 로드하고 성공적으로 로드한 후 대화 상자를 표시합니다.
});

데이터 통신을 위한 브리지 구축: getJSON()

getJSON(url,[data],[callback])
url(String) 요청 주소 전송
data(Map)(선택) 전송할 키/값 매개변수
콜백(함수) ( 선택사항) 로딩 성공 시 콜백 함수.

JSON은 이상적인 데이터 전송 형식으로 JavaScript나 다른 호스트 언어와 잘 통합될 수 있으며 JS에서 직접 사용할 수 있습니다. JSON을 사용하는 것은 전통적인 GET 및 POST를 통해 직접 "누드" 데이터를 보내는 것보다 구조적으로 더 합리적이고 안전합니다. jQuery의 getJSON() 함수는 JSON 매개변수가 설정된 ajax() 함수의 단순화된 버전일 뿐입니다. 이 함수는 도메인 전반에 걸쳐 사용할 수도 있으며 get() 및 post()에 비해 몇 가지 장점이 있습니다. 또한 이 함수는 요청 URL을 "myurl?callback=X" 형식으로 작성하여 프로그램이 콜백 함수 X를 실행하도록 할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$.getJSON('feed.php' ,{
요청: 이미지,
id: 001,
크기: 대형
}, function(json) {
경고(json.images[0].link);
//이 json은 형식이 다음과 같다고 가정할 때 원격으로 반환된 json 객체입니다.
//{'images' : [
> // {link: Images/001.jpg, x :100, y : 100},
// {link:images/002.jpg, x : 200, y 200:}
//]};
}
);

更底层的ajax()函数
虽然get()和post()函数非常简洁易用，但是对于更复杂的一些设计需求还是无法实现，比如在ajax发送的不同时段做出不同的动作等。jQuery提供一个更为具体的函数：ajax()。

ajax( options )
ajax()提供了一大票参数，所以可以实现相当复杂的功能。

参数名	类型	描述
url	String	(默认: 当前页地址) 发送请求的地址。
type	String	(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。 注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
timeout	Number	设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async	Boolean	(默认: true) 默认设置下，所有请求均为异步请求。 如果需要发送同步请求，请将此选项设置为 false。 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend	Function	发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。 XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) { this; // the options for this ajax request } function (XMLHttpRequest) { this; // the options for this ajax request }
cache	Boolean	(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete	Function	请求完成后回调函数 (请求成功或失败时均调用)。 参数： XMLHttpRequest 对象，成功信息字符串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
contentType	String	(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data	Object, String	发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。 查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。 如果为数组，jQuery 将自动为不同值对应同一个名称。 如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2′。
dataType	String	预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息 返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: “xml”: 返回 XML 文档，可用 jQuery 处理。 “html”: 返回纯文本 HTML 信息；包含 script 元素。 “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。 “json”: 返回 JSON 数据 。 “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时， 如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
error	Function	(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。 这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request } function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request }
global	Boolean	(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件， 如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified	Boolean	(默认: false) 仅在服务器数据改变时获取新数据。 使用 HTTP 包 Last-Modified 头信息判断。
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。 如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

데이터 유형으로 xml, script, html, json을 지정할 수 있으며 beforeSend, 오류, 성공, 완료 및 기타 상태에 대한 처리 기능을 설정할 수 있으며, 다른 많은 매개변수도 사용자 정의하여 사용자의 Ajax 경험을 완벽하게 정의할 수 있습니다. . 다음 예에서는 ajax()를 사용하여 XML 문서를 호출합니다.

코드 복사 코드는 다음과 같습니다.

$.ajax({
url: 'doc.xml',
유형: 'GET',
dataType: 'xml',
시간 제한: 1000,
error: function(){
Alert('XML 문서 로드 오류');
},
성공: function(xml){
Alert(xml);
//xml 여기에 XML jQuery 개체인 경우 find(), next() 또는 >
AJAX 이벤트에 대해 자세히 알아보기
앞서 설명한 일부 메서드에는 페이지 관점에서 자체 이벤트 처리 메커니즘이 있습니다. 전체적으로는 로컬 기능이라고만 말할 수 있습니다. jQuery는 특별한 요구 사항을 충족하기 위해 AJAX 전역 함수 정의를 제공합니다. jQuery에서 제공하는 모든 기능은 다음과 같습니다(트리거링 순서대로 정렬).

ajaxStart

(글로벌 이벤트)는 새로운 Ajax 요청을 시작하며 현재 진행 중인 다른 Ajax 요청은 없습니다.
beforeSend
(로컬 이벤트)는 Ajax 요청이 시작될 때 트리거됩니다. 필요한 경우 여기에서 XMLHttpRequest 객체를 설정할 수 있습니다. ajaxSend

(글로벌 이벤트) 요청이 시작되기 전에 트리거되는 전역 이벤트
성공
(로컬 이벤트)은 요청이 성공할 때 트리거됩니다. 즉, 서버는 오류를 반환하지 않으며, 반환된 데이터에는 오류가 없습니다.
ajaxSuccess
글로벌 이벤트 글로벌 요청 성공
오류
(로컬 이벤트)는 오류가 발생한 경우에만 발생합니다. 성공 및 오류 콜백 함수를 동시에 실행할 수 없습니다.
ajaxError
전역 이벤트 오류가 발생하면 전역 이벤트가 트리거됩니다.
complete
(로컬 이벤트) 요청이 성공하든 실패하든 상관없습니다. 동기식 요청인 경우 요청이 완료되면 이 이벤트가 트리거될 수 있습니다.
ajaxComplete
글로벌 이벤트 요청이 완료되면 글로벌 이벤트가 트리거됩니다.
ajaxStop
(글로벌 이벤트) Ajax가 진행 중이고,
로컬 이벤트가 발생합니다. 이전 함수에서 소개한 내용인데, 주로 글로벌 이벤트를 살펴보겠습니다. 개체에 대해 전역 이벤트 모니터링이 수행되면 전 세계의 모든 AJAX 작업이 해당 개체에 영향을 미칩니다. 예를 들어, 페이지가 AJAX 작업을 수행하는 경우 ID가 "loading"인 DIV가 표시됩니다.




코드 복사

코드는 다음과 같습니다: $("#loading").ajaxStart(function(){ $(this).show(); });

글로벌 이벤트는 각 AJAX 요청에 대해 독립적으로 설정할 필요 없이 글로벌 오류 및 성공 응답을 작성하는 데도 도움이 됩니다. 글로벌 이벤트의 매개변수가 매우 유용하다는 점을 지적할 필요가 있습니다. ajaxStart 및 ajaxOptions를 제외한 다른 이벤트에는 event, XMLHttpRequest 및 ajaxOptions의 세 가지 매개변수가 있습니다. 첫 번째 매개변수는 이벤트 자체이고, 두 번째 매개변수는 XHR 객체이고, 세 번째 매개변수는 전달한 ajax 매개변수 객체입니다. 객체에 전역 AJAX 상황 표시:

코드 복사

코드는 다음과 같습니다. $( "#msg").beforeSend(function(e,xhr,o) { $(this).html("Requesting" o.url); }).ajaxSuccess(function(e,xhr , o) {

$(this).html(o.url "요청 성공");

}).ajaxError(function(e,xhr,o) {
$(this).html( o .url "요청 실패");
});


물론 세 번째 매개변수는 AJAX 이벤트에 추가한 사용자 정의 매개변수를 전달하는 데에도 도움이 될 수 있습니다. 단일 AJAX 요청에서 global 값을 false로 설정하여 이 요청을 AJAX 글로벌 이벤트와 독립적으로 만들 수 있습니다.

코드 복사

코드는 다음과 같습니다.$.ajax({ url : "request .php", global: false,

// 전역 Ajax 이벤트를 비활성화합니다.

});


전역 AJAX에 대한 매개변수를 설정하려면 ajaxSetup()함수를 사용합니다. 예를 들어 모든 AJAX 요청을 request.php에 전달하고 전역 메서드를 비활성화합니다. POST 메서드 전달을 강제합니다.

코드 복사

다음과 같습니다: $.ajaxSetup({ url: "request.php", global: false,

type: "POST"

});


一些你不得不知道的方法
写AJAX肯定离不开从页面获取相应的值。在这里简单列举一些方法：

val()
val()函数可以返回表单组建的值，例如任何种类input的值。配合选择符操作，你可以轻易获取选项组、输入框、按钮等元素的值。

复制代码 代码如下:

$("input[name='info']:text").val();
//返回名字为info的文本框的值
$("input[name='pass']:password").val();
//返回名字为pass的密码框的值
$("input[name='save']:radio").val();
//返回名字为save的单选项的值
//以此类推

serialize()

serialize函数可以帮你把表单对象的所有值都转换为字符串序列。如果你要写GET格式的请求，这个就非常方便了。
serializeArray()和serialize()类似，只不过它返回的是JSON对象。