jQuery Ajax 요청 매개변수 및 반환 데이터에 대한 간략한 분석

처음 jQuery ajax 사용법을 배웠을 때, 데이터를 다시 얻을 수 있을 정도로 실물이 너무 마술적이라는 느낌을 받았습니다. 그런 다음 검색된 데이터를 페이지에 렌더링할 수 있습니다.

저는 프로젝트를 아주 일찍 접했고 jquery ajax를 우아하게 사용하는 방법을 몰랐습니다(지금은 우아하지 않습니다).

그때 남들이 작성한 코드를 봤는데

예

$.post("","",...)

또한

$.get("","",...)

또한

$.ajax()

물론 이제 이러한 작성 방법이 모두 동일한 의미를 갖는다는 것을 알았으므로 $.ajax()를 사용하여 작성하는 데 익숙해져야 합니다.

이전 데이터 처리, 데이터 요청(json 데이터 형식) 전송 후 다음 방법을 직접 사용하세요

var request = {};
request.name = $(".name").val();
request.age = $(".age").val();
request.sex = $(".sex").val();
//...

그때 폼에 매개변수 항목이 적어서 별 생각이 없었는데 나중에 폼에 항목이 많아지면 이렇게 요청사항을 수동으로 작성하게 되었어요. 작동하기는 하지만 이 코드를 보면 뭔가 문제가 있는 것 같은 느낌이 듭니다. 적어도 "우아한" 것은 아닙니다.

나중에 jquery에 실제로 양식 데이터를 직렬화할 수 있는 직렬화 메서드가 있어 많은 문제를 줄일 수 있다는 사실을 발견했습니다.

w3c_jquery_serialize-데모

반환된 데이터를 처리하고 페이지에 렌더링합니다.

이전 방법은 위와 완전히 동일합니다. 반환되는 데이터는 json 데이터 형식이고, 그 다음에는 페이지 요소에 각각 값이 할당되므로 코드가 이런 경우가 많습니다.

데이터가 더 많았다면 정말 좀 보기 흉했을 것 같아요. 실제로 더 좋은 방법이 있어야 합니다. 반환되는 것은 json 객체이므로 객체의 속성 값을 순회하여 모든 값을 얻은 다음 이를 페이지의 해당 요소에 순차적으로 렌더링할 수 있습니다.

객체 순회는 for-in을 사용하여 작성할 수 있습니다(더 좋은 작성 방법이 있습니까?)

$.ajax({
//...
success:function(result){
for(var v in result){
// 如果渲染的元素都是统一的输入框形式的话，
$("form").find("input[name="+ v +"]").val(result[v]); 
// 如果有其他元素 则另外单独校验处理
}
}
})

위 이름(또는 다른 태그는 반환된 데이터의 속성과 일치하도록 먼저 페이지에 작성되어야 합니다).

jQuery의 일반적인 Ajax 요청 방법 4가지

1.$.ajax()는 생성된 XMLHttpRequest 객체를 반환합니다.

$.ajax()에는 각 구성 및 콜백 함수 정보를 포함하는 매개변수 키/값 객체라는 하나의 매개변수만 있습니다. 아래의 자세한 매개변수 옵션을 참조하세요.

dataType 옵션을 지정하는 경우 서버가 올바른 MIME 정보를 반환하는지 확인하세요(예: xml이 "text/xml"을 반환함).

예:

데이터를 서버에 저장하고 성공하면 정보를 표시합니다.

$.ajax({
type: "post",
dataType: "html",
url: '/Resources/GetList.ashx',
data: dataurl,
success: function (data) {
if (data != "") {
$("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$$")[1], buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);

}
}
});

2. 원격 HTTP GET 요청을 통해 정보를 로드합니다.

복잡한 $.ajax를 대체하는 간단한 GET 요청 함수입니다. 요청이 성공하면 콜백 함수를 호출할 수 있습니다. 오류 발생 시 함수를 실행해야 하는 경우 $.ajax를 사용하세요.

예:

$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}); 

3. 원격 HTTP POST 요청을 통해 정보를 로드합니다.

복잡한 $.ajax를 대체하는 간단한 POST 요청 함수입니다. 요청이 성공하면 콜백 함수를 호출할 수 있습니다. 오류 발생 시 함수를 실행해야 하는 경우 $.ajax를 사용하세요.

예:

$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {
if (data == "ok") {
alert("添加成功！");
}
})

4. HTTP GET 요청을 통해 JSON 데이터를 로드합니다.

예:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
}); 

위 내용은 에디터에서 소개한 jQuery Ajax 요청 매개변수 및 반환 데이터 처리 내용입니다. 모두에게 도움이 되었으면 좋겠습니다!