Json data_jquery의 jQuery Ajax 비동기 처리에 대한 자세한 설명
ajax
jquery
json
먼저 공식 예를 살펴보겠습니다.
AJAX 요청을 사용하여 JSON 데이터를 얻고 결과를 출력합니다.
코드 복사 Code As 다음:
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result , 기능(i, 필드){
🎜>이 함수는 축약된 Ajax 함수로 다음과 같습니다.
코드는 다음과 같습니다:$.ajax({ url: url, data: data, Success: callback,
dataType: json });
서버로 데이터 보내기를 쿼리 문자열로 URL에 추가할 수 있습니다. data 매개변수의 값이 객체(맵)인 경우 문자열로 변환되어 URL로 인코딩된 후 URL에 추가됩니다.
콜백에 전달되는 반환 데이터는 JavaScript 객체이거나 JSON 구조에 정의된 배열일 수 있으며 $.parseJSON() 메서드를 사용하여 구문 분석됩니다.
test.js에서 JSON 데이터를 로드하고 JSON 데이터에 이름 필드 데이터를 표시합니다.
서버로 데이터 보내기를 쿼리 문자열로 URL에 추가할 수 있습니다. data 매개변수의 값이 객체(맵)인 경우 문자열로 변환되어 URL로 인코딩된 후 URL에 추가됩니다.
콜백에 전달되는 반환 데이터는 JavaScript 객체이거나 JSON 구조에 정의된 배열일 수 있으며 $.parseJSON() 메서드를 사용하여 구문 분석됩니다.
test.js에서 JSON 데이터를 로드하고 JSON 데이터에 이름 필드 데이터를 표시합니다.
코드 복사
asp.net 인스턴스
먼저 전송할 json 데이터를 제공합니다: [{"demoData":"This Is The JSON Data"}]
1, 일반 aspx 페이지를 사용하세요
이 방법이 가장 다루기 쉬운 것 같아요. 아래 코드를 보세요
먼저 전송할 json 데이터를 제공합니다: [{"demoData":"This Is The JSON Data"}]
1, 일반 aspx 페이지를 사용하세요
이 방법이 가장 다루기 쉬운 것 같아요. 아래 코드를 보세요
코드 복사
코드 $.ajax({ url: "Default.aspx", dataType: "json", 성공: 함수(데이터) {
> ~ 오류: 함수(XMLHttpRequest, textStatus, errorThrown) { ~ >
백그라운드에서 데이터를 전송하는 코드는 다음과 같습니다
Response.Clear();
Response.Write("[{"demoData":"This Is The JSON Data"}]")
Response.Flush(); .End();
이 처리 방법은 전달된 데이터를 json 데이터로 직접 구문 분석하는데, 이는 여기서 프런트 엔드 js 코드가 해당 데이터를 문자열 데이터가 아닌 json 객체 데이터로 직접 구문 분석할 수 있음을 의미합니다. data[0].demoData와 같은 이 json 객체 데이터는
2에서 직접 사용되며 webservice(asmx)를 사용하여
처리됩니다. 이 처리 방법은 전달된 데이터를 json 객체 데이터로 처리하지 않고 처리합니다. 문자열로 다음 코드
여기서 이 처리 방법은 그냥 통과합니다. 반환된 json 데이터는 문자열로 처리됩니다. 이 데이터는 실제 json 객체 데이터가 될 수 있도록 평가 처리됩니다.
먼저 html 템플릿을 살펴보겠습니다.
코드 복사
백그라운드에서 데이터를 전송하는 코드는 다음과 같습니다
코드를 복사하세요 코드는 다음과 같습니다
Response.Clear();
Response.Write("[{"demoData":"This Is The JSON Data"}]")
Response.Flush(); .End();
2에서 직접 사용되며 webservice(asmx)를 사용하여
처리됩니다. 이 처리 방법은 전달된 데이터를 json 객체 데이터로 처리하지 않고 처리합니다. 문자열로 다음 코드
코드 복사 코드는 다음과 같습니다.
$ .ajax ({
type: "post",
url: "JqueryCSMethodForm.asmx/GetDemoData",
dataType: "json",/*이 문장은 사용 여부에 관계없이 영향을 미치지 않습니다* /
contentType: "application/json; charset=utf-8",
성공: 함수(데이터) {
$("input#showTime").val(eval('(' data.d ')')[0 ].demoData);
//데이터를 변환하는 방법에는 두 가지가 있습니다. 두 가지 처리 방법은 동일한 효과를 갖습니다.//$("input#showTime").val(eval(data.d )[0].demoData );
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown); asmx 메소드 코드에 대한 코드 복사
type: "post",
url: "JqueryCSMethodForm.asmx/GetDemoData",
dataType: "json",/*이 문장은 사용 여부에 관계없이 영향을 미치지 않습니다* /
contentType: "application/json; charset=utf-8",
성공: 함수(데이터) {
$("input#showTime").val(eval('(' data.d ')')[0 ].demoData);
//데이터를 변환하는 방법에는 두 가지가 있습니다. 두 가지 처리 방법은 동일한 효과를 갖습니다.//$("input#showTime").val(eval(data.d )[0].demoData );
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown); asmx 메소드 코드에 대한 코드 복사
코드는 다음과 같습니다: [WebMethod] public static string GetDemoData() { return " [{"demoData":"This Is The JSON Data"}]"; }
여기서 이 처리 방법은 그냥 통과합니다. 반환된 json 데이터는 문자열로 처리됩니다. 이 데이터는 실제 json 객체 데이터가 될 수 있도록 평가 처리됩니다.
먼저 html 템플릿을 살펴보겠습니다.
코드 복사
코드는 다음과 같습니다.
