Json 데이터의 jQuery Ajax 비동기 처리에 대한 자세한 설명-JS 튜토리얼-php.cn

Json 데이터의 jQuery Ajax 비동기 처리에 대한 자세한 설명

高洛峰

풀어 주다： 2017-01-12 09:42:57

원래의

1116명이 탐색했습니다.

먼저 공식 예제를 살펴보겠습니다
AJAX 요청을 사용하여 JSON 데이터를 얻고 결과를 출력합니다.

$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
  });
});

로그인 후 복사

이 함수는 Ajax 함수의 약어로 다음과 같습니다.

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

로그인 후 복사

서버로 전송된 데이터는 URL에 쿼리 문자열로 추가될 수 있습니다. data 매개변수의 값이 객체(맵)인 경우 문자열로 변환되어 URL로 인코딩된 후 URL에 추가됩니다.
콜백에 전달되는 반환 데이터는 JavaScript 객체이거나 JSON 구조에 정의된 배열일 수 있으며 $.parseJSON() 메서드를 사용하여 구문 분석됩니다.
test.js에서 JSON 데이터를 로드하고 JSON 데이터에 이름 필드 데이터를 표시합니다.

$.getJSON("test.js", function(json){
  alert("JSON Data: " + json.users[3].name);
});

로그인 후 복사

asp.net 인스턴스
먼저 전달할 json 데이터를 제공합니다. [{ " decoData":"This Is The JSON Data"}]
1, 일반 aspx 페이지를 사용하여 처리합니다
이 방법이 처리하기 가장 쉬운 방법이라고 생각합니다. 아래 코드를 살펴보세요

$.ajax({ 
                                        type: "post", 
                                        url: "Default.aspx", 
                                        dataType: "json", 
                                        success: function (data) { 
                                                $("input#showTime").val(data[0].demoData); 
                                        }, 
                                        error: function (XMLHttpRequest, textStatus, errorThrown) { 
                                                alert(errorThrown); 
                                        } 
                                });

로그인 후 복사

백그라운드에서 데이터를 전달하는 코드는 다음과 같습니다

Response.Clear(); 
Response.Write("[{"demoData":"This Is The JSON Data"}]"); 
Response.Flush(); 
Response.End();

로그인 후 복사

이 처리 방법은 전달된 데이터를 json 데이터로 직접 구문 분석하는데, 이는 여기의 프런트엔드 js 코드가 구문 분석된 데이터를 직접 변환할 수 있음을 의미합니다. data[0].demoData와 같은 문자열 데이터 대신 json 객체 데이터에 이 json 객체 데이터를 여기서 직접 사용
2하고, webservice(asmx)를 사용하여
처리합니다. 이 처리 방법은 전달되지 않습니다. data는 json 객체 데이터로 처리되지만 아래와 같이 문자열로 처리됩니다.

$.ajax({     
type: "post",     
url: "JqueryCSMethodForm.asmx/GetDemoData",     
dataType: "json",/*这句可用可不用，没有影响*/
contentType: "application/json; charset=utf-8",     
success: function (data) {     
$("input#showTime").val(eval(&#39;(&#39; + data.d + &#39;)&#39;)[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 템플릿을 살펴보겠습니다.

  <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
                <tr>
                    <th>
                        订单ID</th>
                    <th>
                        客户ID</th>
                    <th>
                        雇员ID</th>
                    <th>
                        订购日期</th>
                    <th>
                        发货日期</th>
                    <th>
                        货主名称</th>
                    <th>
                        货主地址</th>
                    <th>
                        货主城市</th>
                    <th>
                        更多信息</th>
                </tr>
                <tr id="template">
                    <td id="OrderID">
                    </td>
                    <td id="CustomerID">
                    </td>
                    <td id="EmployeeID">
                    </td>
                    <td id="OrderDate">
                    </td>
                    <td id="ShippedDate">
                    </td>
                    <td id="ShippedName">
                    </td>
                    <td id="ShippedAddress">
                    </td>
                    <td id="ShippedCity">
                    </td>
                    <td id="more">
                    </td>
                </tr>
            </table>

로그인 후 복사

주의해야 할 사항 to는 내부의 모든 id 속성이며 이것이 키입니다. AJAX 요청 및 데이터 바인딩에 대한 코드를 살펴보겠습니다.

    $.ajax({
            type: "get",//使用get方法访问后台
            dataType: "json",//返回json格式的数据
            url: "BackHandler.ashx",//要访问的后台地址
            data: "pageIndex=" + pageIndex,//要发送的数据
            complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
            success: function(msg){//msg为返回的数据，在这里做数据绑定
                var data = msg.table;
                $.each(data, function(i, n){
                    var row = $("#template").clone();
                    row.find("#OrderID").text(n.订单ID);
                    row.find("#CustomerID").text(n.客户ID);
                    row.find("#EmployeeID").text(n.雇员ID);
                    row.find("#OrderDate").text(ChangeDate(n.订购日期));
                    if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期));
                    row.find("#ShippedName").text(n.货主名称);
                    row.find("#ShippedAddress").text(n.货主地址);
                    row.find("#ShippedCity").text(n.货主城市);
                    row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>");                    
                    row.attr("id","ready");//改变绑定好数据的行的id
                    row.appendTo("#datas");//添加到模板的容器中
                });

로그인 후 복사

이것은 jQuery의 AJAX 방식으로 데이터를 반환하는 것은 복잡하지 않습니다. 주로 페이지에 정의된 대로 데이터를 표시하는 방법을 설명합니다. 템플릿. 첫 번째는 "var row = $("#template").clone();"입니다. 먼저 템플릿을 복사한 다음 row.find("#OrderID").text(n. order ID);를 나타냅니다. id=OrderID인 태그의 경우 innerText를 해당 데이터로 설정합니다. 물론 html 형식의 데이터로 설정할 수도 있습니다. 또는 row.find("#OrderDate").text(ChangeDate(n. order date)); 와 같은 외부 함수를 통해 데이터를 필요한 형식으로 변환합니다. 이는 템플릿 바인딩 데이터를 수행하는 서버 컨트롤과 약간 비슷합니다.
이 모두는 정적 페이지에 배치되며 AJAX 메서드를 통해 백그라운드에서만 데이터를 가져옵니다. 모든 HTML 코드는 다음과 같습니다.




    test1
    
    



    
         
            

            
             
            <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
                <tr>
                    <th>
                        订单ID</th>
                    <th>
                        客户ID</th>
                    <th>
                        雇员ID</th>
                    <th>
                        订购日期</th>
                    <th>
                        发货日期</th>
                    <th>
                        货主名称</th>
                    <th>
                        货主地址</th>
                    <th>
                        货主城市</th>
                    <th>
                        更多信息</th>
                </tr>
                <tr id="template">
                    <td id="OrderID">
                    </td>
                    <td id="CustomerID">
                    </td>
                    <td id="EmployeeID">
                    </td>
                    <td id="OrderDate">
                    </td>
                    <td id="ShippedDate">
                    </td>
                    <td id="ShippedName">
                    </td>
                    <td id="ShippedAddress">
                    </td>
                    <td id="ShippedCity">
                    </td>
                    <td id="more">
                    </td>
                </tr>
            </table>
        
        
            LOADING....

로그인 후 복사

PageData.js에는 위의 AJAX 요청이 포함되어 있습니다. 데이터 코드를 정의하는 js는 전체 페이지에서 양식을 사용하지도 않습니다. 이렇게 하면 어떤 이점이 있나요? 다음 템플릿

         <ul id="datas">
                <li id="template">
                    <span id="OrderID">
                        fsdfasdf
                    </span>
                    <span id="CustomerID">
                    </span>
                    <span id="EmployeeID">
                    </span>
                    <span id="OrderDate">
                    </span>
                    <span id="ShippedDate">
                    </span>
                    <span id="ShippedName">
                    </span>
                    <span id="ShippedAddress">
                    </span>
                    <span id="ShippedCity">
                    </span>
                    <span id="more">
                    </span>
                </li>
            </ul>

로그인 후 복사

을 보고 여전히 id 속성에 주의하세요. 이것을 본 후에는 어떤 표현 형식을 사용하더라도 id 속성만 동일하면 데이터가 해당 위치에 바인딩될 수 있다는 것을 이해해야 합니다. 이 경우 프로그램을 만드는 우리는 아티스트의 수정으로 인해 코드를 수정할 필요가 없으며 아티스트는 HTML만 작성하면 되며 서버 컨트롤에 대한 템플릿을 만들 필요가 없습니다(그러나 저는 그런 아티스트를 만나본 적이 없다면 모두 아티스트가 디자인한 것이므로 서버 컨트롤 템플릿으로 변경하겠습니다.)

Json 데이터의 jQuery Ajax 비동기 처리에 대한 자세한 설명은 PHP 중국어 웹사이트를 참고하세요!