jQuery Ajax 사용법에 대해 이야기해 보세요.-JS 튜토리얼-php.cn

정의 및 사용법

ajax() 메서드는 HTTP 요청을 통해 원격 데이터를 로드합니다.

이 방법은 jQuery의 기본 AJAX 구현입니다. 간단하고 사용하기 쉬운 상위 수준 구현을 보려면 $.get, $.post 등을 참조하세요. $.ajax()는 생성된 XMLHttpRequest 객체를 반환합니다. 대부분의 경우 유연성을 높이기 위해 덜 일반적으로 사용되는 옵션을 조작해야 하는 경우가 아니면 이 기능을 직접 조작할 필요가 없습니다.

가장 간단한 경우에는 $.ajax()를 매개변수 없이 직접 사용할 수 있습니다.

참고: 모든 옵션은 $.ajaxSetup() 함수를 통해 전역적으로 설정할 수 있습니다.

jQuery Ajax는 웹 애플리케이션 개발에 매우 일반적으로 사용됩니다. 여기에는 주로 ajax, get, post, load, getscript 등과 같은 새로 고침이 필요 없는 일반적인 작업 방법이 포함되어 있습니다.

가장 간단한 방법부터 시작해 보겠습니다. 복잡한 ajax 요청을 처리할 때 jQuery는 jQuery.ajax() 메서드를 사용합니다. jQuery에는 jQuery.ajax() 메서드를 캡슐화하는 몇 가지 간단한 메서드가 있으므로 일부 간단한 Ajax 이벤트를 처리할 때 jQuery.ajax() 메서드를 사용할 필요가 없습니다. 이미 등장했으니 모두가 곧 마스터할 수 있을 거라 믿습니다. 물론 jQuery.ajax() 메서드는 이 글의 최우선 사항이기 때문에 이 글의 후반부에서 매우 구체적으로 설명하겠습니다.

다음 5가지 메소드는 일반적인 Ajax 요청의 짧은 형식을 수행합니다. 복잡한 Ajax 요청을 처리할 때는 jQuery.ajax()를 사용해야 합니다.

1.load(url,[데이터],[콜백])

원격 HTML 파일 코드를 로드하여 DOM에 삽입합니다. 기본적으로 GET 메서드가 사용되며, 매개변수 전달 시 자동으로 POST 메서드로 변환됩니다.

◦url: 로드할 원격 URL 주소
◦ 데이터: 서버로 전송되는 키/값 데이터
◦ 콜백 : 로딩 성공 시 콜백 함수

샘플 코드는 다음과 같습니다.

//无参数、无回调函数
$("#showload").load("load.htm");
//无回调函数
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
 function() {
  //处理
 })

로그인 후 복사

로드된 파일의 내용이 여기에 표시됩니다. 로드

2.jQuery.get(url, [데이터], [콜백])

서버에서 데이터를 얻으려면 get 메소드를 사용하세요.

◦ 요청을 보낼 URL 주소
◦서버로 보낼 데이터
◦ 로딩 성공 시 콜백 기능

샘플 코드는 다음과 같습니다.

$.get("jqueryget.htm", { "id": this.id },
 function(req) {
  //成功时的回调方法
  $("#showget").html(req);
 });
})

로그인 후 복사

ID를 전달하여 다른 로고를 얻으려면 $.get() 메서드를 사용하세요. 이때 get 메소드를 통해 요청을 얻는다는 점을 언급할 필요가 있으므로, 매개변수 값을 얻을 때 Request.QueryString을 사용해야 합니다. Request Request.QueryString

의 차이점을 살펴볼 수 있습니다.

바이두 로고 구글 로고

logo3.jQuery.post(url, [data], [callback])
이 여기에 표시됩니다. 비동기 요청을 하려면 POST 메소드를 사용하세요. jQuery.get()과 비교했을 때 요청 방식에 차이가 있으므로 여기서는 특별히 설명하지 않습니다. 사용법은 jQuery.get()과 유사합니다.

4.jQuery.getScript(url,[콜백])

GET 메소드를 통해 자바스크립트 파일을 로드하고 실행하도록 요청합니다. 이 기술은 이전 글에서 언급한 바 있으며, jQuery.ajax를 사용하는 간단한 방법이기도 합니다. ajax가 js를 로딩하는 모습을 볼 수 있으므로 여기서는 특별한 설명은 없습니다.

5.jQuery.getJSON(url,[데이터],[콜백])

get 메소드를 통해 json 형식의 데이터를 가져옵니다.

샘플 코드는 다음과 같습니다.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne&#63;tags=cat&tagmode=any&format=json&jsoncallback=&#63;", function(req) {
 $.each(req.items, function(i, item) {
  if (i == vnum) {
   $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
  }
 });
});

로그인 후 복사

마찬가지로 이 메서드는 다음 메서드와 유사한 jQuery.ajax() 메서드의 단축 메서드이기도 합니다.

매개변수 목록:

매개변수 이름	유형	설명
URL	문자열	(기본값: 현재 페이지 주소) 요청을 보낼 주소입니다.
유형	문자열	(기본값: "GET") 요청 방법("POST" 또는 "GET"), 기본값은 "GET"입니다. 참고: PUT 및 DELETE와 같은 다른 HTTP 요청 방법도 사용할 수 있지만 일부 브라우저에서만 지원됩니다.
타임아웃	번호	요청 시간 제한(밀리초)을 설정합니다. 이 설정은 전역 설정보다 우선 적용됩니다.
비동기	부울	(기본값: true) 기본적으로 모든 요청은 비동기식 요청입니다. 동기 요청을 보내야 하는 경우 이 옵션을 false로 설정하세요. 동기 요청은 브라우저를 잠그며 사용자는 다른 작업을 수행하기 전에 요청이 완료될 때까지 기다려야 합니다.
보내기 전	기능	요청을 보내기 전에 사용자 정의 HTTP 헤더를 추가하는 등 XMLHttpRequest 객체의 기능을 수정할 수 있습니다. XMLHttpRequest 객체가 유일한 매개변수입니다. <span style="color: rgb(0,0,255)">function (XMLHttpRequest) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax <a target="_blank" style="color: rgb(51,153,255); text-decoration: none" href="http://www.php100.com/tags.php/request/">request</a>}</span></span></span> 로그인 후 복사
cache	Boolean	(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete	Function	请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 <span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span> 로그인 후 복사
contentType	String	(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data	Object, 문자열	서버로 데이터가 전송되었습니다. 요청 문자열 형식으로 자동 변환됩니다. GET 요청의 URL에 추가됩니다. 이 자동 변환을 비활성화하려면 processData 옵션 설명을 참조하세요. 키/값 형식이어야 합니다. 배열인 경우 jQuery는 자동으로 동일한 이름을 다른 값에 할당합니다. 예를 들어, {foo:["bar1", "bar2"]}는 '&foo=bar1&foo=bar2'로 변환됩니다.
데이터 유형	문자열	서버에서 반환할 것으로 예상되는 데이터 유형입니다. 지정하지 않으면 jQuery는 HTTP 패킷 MIME 정보를 기반으로 responseXML 또는 responseText를 자동으로 반환하고 이를 콜백 함수 매개 변수로 전달합니다. 사용 가능한 값: "xml": jQuery로 처리할 수 있는 XML 문서를 반환합니다. "html": 스크립트 요소가 포함된 일반 텍스트 HTML 정보를 반환합니다. "script": 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다. "json": JSON 데이터를 반환합니다. "jsonp": JSONP 형식입니다. "myurl?callback=?"과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 콜백 함수를 실행하기 위해 자동으로 ?를 올바른 함수 이름으로 바꿉니다.
오류	기능	(기본값: 자동으로 결정(xml 또는 html)) 이 메소드는 요청이 실패할 때 호출됩니다. 이 메서드는 XMLHttpRequest 개체, 오류 메시지 및 (아마도) 캡처된 오류 개체라는 세 가지 매개 변수를 사용합니다. <span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus, errorThrown) { <span style="color: rgb(0,128,0)">// 通常情况下textStatus和errorThown只有其中一个有值 <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span> 로그인 후 복사
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	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 <span style="color: rgb(0,0,255)">function (data, textStatus) { <span style="color: rgb(0,128,0)">// data could be xmlDoc, jsonObj, html, text, etc... <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span> 로그인 후 복사

这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。

代码如下

$.ajax({
 url: url,
 dataType: 'json',
 data: data,
 success: callback
});

로그인 후 복사

可能你还没有使用过json数据，我的小站中已经好几次提到了json的使用，如果你还不熟悉json格式，可以看看jquery移动listbox的值、jQuery下json的使用实例

获得json数据

这里将随机显示一条json数据到目前为止我们总结了jQuery.ajax的五种简写方法，接下来让我们集中精神，看看jQuery.ajax()方法，在使用中，笔者也是经常使用的jQuery.ajax()，因为大多数情况，我们需要对ajax请求出错的情况进行捕捉并处理。

6.jQuery.ajax()

使用jQuery.ajax()方法获取数据，下边给个常用写法，并做了相应的注释。

代码如下

$.ajax({
 url: "http://www.hzhuti.com", //请求的url地址
 dataType: "json", //返回格式为json
 async: true, //请求是否异步，默认为异步，这也是ajax重要特性
 data: { "id": "value" }, //参数值
 type: "GET", //请求方式
 beforeSend: function() {
  //请求前的处理
 },
 success: function(req) {
  //请求成功时处理
 },
 complete: function() {
  //请求完成的处理
 },
 error: function() {
  //请求出错处理
 }
});

로그인 후 복사

使用jQuery.ajax()

这里将显示数据

$.ajax我的实际应用例子

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
 url:'productManager_reverseUpdate',// 跳转到 action 
 data:{ 
    selRollBack : selRollBack, 
    selOperatorsCode : selOperatorsCode, 
    PROVINCECODE : PROVINCECODE, 
    pass2 : pass2 
 }, 
 type:'post', 
 cache:false, 
 dataType:'json', 
 success:function(data) { 
  if(data.msg =="true" ){ 
   // view("修改成功！"); 
   alert("修改成功！"); 
   window.location.reload(); 
  }else{ 
   view(data.msg); 
  } 
  }, 
  error : function() { 
   // view("异常！"); 
   alert("异常！"); 
  } 
});

로그인 후 복사

//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
 var formParam = $("#form1").serialize();//序列化表格内容为字符串 
 $.ajax({ 
  type:'post',  
  url:'Notice_noTipsNotice', 
  data:formParam, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
  } 
 }); 
} 
//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
  type:'post', 
  url:'validatePwd2_checkPwd2&#63;password2='+password2, 
  data:{}, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
   if( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间 
   { 
    textPassword2.html("<font color='red'>业务密码不正确！</font>"); 
    $("#validatePassword2").val("pwd2Error"); 
    checkPassword2 = false; 
    return; 
   } 
  }, 
  error:function(){} 
});
//4.$.ajax拼接data的异步请求
$.ajax({ 
 url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', 
 type:'post', 
 data:'merName='+values, 
 async : false, //默认为true 异步 
 error:function(){ 
  alert('error'); 
 }, 
 success:function(data){ 
  $("#"+divs).html(data); 
 }
});

로그인 후 복사

本篇的jQuery ajax使用就总结到这里，当然还有一些方法并未能全部的总结。如ajaxStart()、ajaxStop()等，在以后使用中，我会把它们也总结下来。