Jquery의 get, post, ajax, getJSON 함수 사용에 대한 자세한 설명-JS 튜토리얼-php.cn

이번에는 Jquery의 get, post, ajax, getJSON 함수 사용에 대해 자세히 설명하겠습니다. Jquery의 get, post, ajax, getJSON 함수를 사용할 때 notes란 무엇인가요? 보세요.

참조 값이 있으며, 필요한 친구가 참조할 수 있습니다.

1, $.get(url,[data],[callback])

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

그 중 서버에서 반환되는 데이터 형식은 실제로는 우리가 원하는 json 데이터 형식이 아닌 문자열 형식입니다. 단지 비교와 설명을 위해 여기에 인용했습니다
$.get("data.php",$ ("#firstName.val()"),function(data){$("#getResponse").html(data) }//반환된 데이터는 문자열 유형입니다.);

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

설명: 이 함수는 $.get() 매개변수와 유사하며 추가 유형 매개변수가 있습니다. Type은 요청된 data 유형입니다. html, xml, json 등이 될 수 있습니다. 이 매개변수를 json으로 설정하면 반환되는 형식은 json 형식이 됩니다. 설정하지 않으면 $.get()에서 반환되는 형식과 동일합니다. 이는 문자열입니다
$.post("data.php",$("#firstName.val()"),function(data){$("#postResponse").html(data.name);}," json"//얻는 데이터의 형식이 설정되어 있으므로, 가져오는 데이터 형식은 json 형식입니다);

Three, $.ajax(opiton)

설명: $.ajax()는 다음과 같은 강력한 함수입니다. ajax에서 많은 정밀한 제어를 수행할 수 있으며 자세한 설명이 필요합니다. 관련 정보를 참조하세요
$.ajax({url: "ajax/ajax_selectPicType.aspx",data:{Full:"fu"},type: "POST",dataType :'json',success:CallBack,error:function (er){BackErr(er);}});

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

$ .getJSON("data.php",$(" #firstName.val()"),function(jsonData){$("#getJSONResponse").html(jsonData.id);}//설정할 필요가 없습니다. 직접 얻는 데이터 타입은 json이므로 호출 시 jsonData를 사용해야 한다. 기본 HTTPRequest를 직접 처리합니다. jQuery는

JavaScript

를 캡슐화하므로 AJAX 애플리케이션의 문제도 고려했을 것입니다. 실제로 jQuery를 사용하여 AJAX를 작성하면 JS에서 직접 작성하는 것보다 N배 더 편리할 것입니다. (JQuery를 오랫동안 사용하다 보면 JS에 대한 지식이 사라질까 봐...) 다들 이미 jQuery 구문에 익숙하다고 가정하고, ajax의 몇 가지 응용 사례를 요약해 보겠습니다.

Load static page

load( url, [data], [callback] ) url (String) 요청된 HTML 페이지의 URL 주소

data (Map) (선택적 매개변수) key/ 서버로 전송되는 값 데이터

callback(콜백)(선택적 매개변수) 요청이 완료될 때의 콜백 함수(성공할 필요는 없음)
load() 메서드는 정적 페이지 콘텐츠를 지정된 jQuery 객체로 쉽게 로드할 수 있습니다. $('#ajax-p').load('data.html');
이러한 방식으로 data.html의 내용은 ID ajax-p를 사용하여 DOM 개체에 로드됩니다. 다음과 같이 ID를 지정하여 콘텐츠의 일부를 로드하는 Ajax 작업을 구현할 수도 있습니다.
$('#ajax-p').load('data.html#my-section')

GET 및 POST 방법

get( url, [data], [callback] ) url (String) 요청을 보낼 URL 주소

data (Map) (선택 매개변수) 서버로 보낼 데이터, Key /value 로드가 성공하면 공식 표현이 요청 URL에 QueryString

callback(Callback)(선택적 매개변수) 콜백 함수로 추가됩니다(이 메서드는 응답의 반환 상태가 성공인 경우에만 호출됩니다)

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

$.get('login.php', { id : 'Robin', password: '123456', gate : 'index' }, function(data, status) { //data为返回对象，status为请求的状态 alert(data); //此时假设服务器脚本会返回一段文字"你好，Robin！"，那么浏览器就会弹出对话框显示该段文字 
alert(status); //结果为success, error等等，但这里是成功时才能运行的函数 });
post( url, [data], [callback], [type] ) url (String) 发送请求的URL地址.
data (Map)(可选参数) 要发送给服务器的数据，以 Key/value 的键值对形式表示
callback (Callback) (可选参数) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)
type (String) (可选参数) 请求数据的类型，xml,text,json等
同样是jQuery提供的一个简便函数，其实用法$.post('regsiter.php', { id:'Robin', password: '123456', type:'user' },function(data, status) { alert(data); }, "json");

로그인 후 복사

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

getScript( url, [callback] ) url (String) 로드할 JS 파일의 주소

콜백(함수) (선택) 로딩 성공 후 콜백 함수

getScript() 函数可以远程载入JavaScript脚本并且执行。这个函数可以跨域载入JS文件（神奇……？！）。这个函数的意义是巨大的，它可以很大程度的缩减页面初次载入的代码量，因为你可以根据用户的交互来载入相应的JS文件，而不必在页面初始化的时候全部载入。

$.getScript('ajaxEvent.js', function() { alert("Scripts Loaded!"); //载入ajaxEvent.js，并且在成功载入后显示对话框提示。 
});

로그인 후 복사

构建数据通讯的桥梁：getJSON()

getJSON(url,[data],[callback]) url (String) 发送请求地址

data (Map) (可选) 待发送 Key/value 参数

callback (Function) (可选) 载入成功时回调函数。

JSON 是一种理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送”裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的 ajax()函数的一个简化版本。

这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写成”myurl?callback=X”这种格式，让程序执行回调函数X。

$.getJSON('feed.php',{ request: images, id: 001, size: large }, function(json) { alert(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()提供了一大票参数，所以可以实现相当复杂的功能。

你可以指定xml、script、html、json作为其数据类型，可以为beforeSend、error、sucess、complete等状态设置处理函数，众多其它参数也可以订完完全全定义用户的Ajax体验。下面的例子中，我们用ajax()来调用一个XML文档：

$.ajax({ 
url: 'doc.xml', 
type: 'GET', 
dataType: 'xml', 
timeout: 1000, 
error: function(){ 
alert('Error loading XML document'); 
}, 
success: function(xml){ 
alert(xml); 
//此处xml就是XML的jQuery对象了，你可以用find()、next()或XPath等方法在里面寻找节点，和用jQuery操作HTML对象没有区别 
}});

로그인 후 복사

进一步了解AJAX事件

前面讨论的一些方法都有自己的事件处理机制，从页面整体来说，都只能说是局部函数。jQuery提供了AJAX全局函数的定义，以满足特殊的需求。下面是jQuery提供的所有函数（按照触发顺序排列如下）：

ajaxStart (全局事件) 开始新的Ajax请求，并且此时没有其他ajax请求正在进行 beforeSend (局部事件) 当一个Ajax请求开始时触发。如果需要，你可以在这里设置XMLHttpRequest对象 ajaxSend (全局事件) 请求开始前触发的全局事件 success (局部事件) 请求成功时触发。即服务器没有返回错误，返回的数据也没有错误 ajaxSuccess 全局事件全局的请求成功 error (局部事件) 仅当发生错误时触发。

你无法同时执行success和error两个回调函数 ajaxError 全局事件全局的发生错误时触发 complete (局部事件) 不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件 ajaxComplete 全局事件全局的请求完成时触发 ajaxStop (全局事件) 当没有Ajax正在进行中的时候，触发局部事件在之前的函数中都有介绍，我们主要来看看全局事件。对某个对象进行全局事件监听，那么全局中的AJAX动作，都会对其产生影响。比如，当页面在进行AJAX操作时，ID为”loading”的p就显示出来：

$("#loading").ajaxStart(function(){ $(this).show(); });

로그인 후 복사

全局事件也可以帮助你编写全局的错误相应和成功相应，而不需要为每个AJAX请求独立设置。有必要指出，全局事件的参数是很有用的。除了 ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三个参数。第一个参数即事件本身；第二个是XHR对象；第三个是你传递的ajax参数对象。在一个对象里显示全局的AJAX情况：

$("#msg").beforeSend(function(e,xhr,o) { $(this).html("正在请求"+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对象。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！