在 jQuery 中调用 AJAX 函数后如何使用 JSON 数据

Question

使用此代码：

 $("#mybutton").click(function(){
           $.ajax({
                url: '/Member/GetPinPoints/@Model.Id',
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
            alert(data);
            },
            error: function() {

            alert("error");
            }
            });


    return false;
});

我收到一个如下所示的 JSON 对象：

[{"Position":1,"Top":182,"Left":20,"Height":73,"Width":90},{"Position":2,"Top":69,"Left":103,"Height":98,"Width":1}]

如何迭代此数据，假设我是否想提醒每个单独的值？

Answer 1

普通的旧 JavaScript：

for(var i = 0; i < data.length; i++){
    for(var key in data[i]){
        alert(key + " : " + data[i][key]);
    }
}

和 jQuery：

$.each(data, function(index, element){
    $.each(element, function(key, value){
        alert(key + " : " + value);
    });
});

您需要在嵌套循环中进行迭代，因为您需要遍历数组中的所有元素，并且对于每个数组元素，遍历所有属性。

Answer 2

前面的例子可以工作，但它们很幼稚。不擅长编码的示例只会循环遍历数组，这不是很健壮。

假设您在代码隐藏方法中返回键/值对，并且您希望能够根据需要分离这些数据来使用。你就从这个开始吧。

[WebMethod]
    public static Dictionary<string, string> EditPromo(int promoId)
    {
        using (var db = new DataContext())
        {
            var q = db.Promos.Where(x => x.promoID == promoId).Select(x => x).Single();

            return new Dictionary<string, string>()
                       {
                           {"code", q.code},
                           {"label", q.label},
                           {"expiredate", string.Format("{0:M/d/yyyy}", q.expireDate)}
                       };
        }
    }

现在我们可以通过 jQuery Ajax 访问它，如下所示：

$.ajax({
        url: "/Manager/mPromo/Promo.aspx/EditPromo",
        context: $("#editPromo"),
        data: "{promoId:'" + promoid + "'}",
        success: function (msg)
        {
            var resp = msg.d;
            $("h1:first", this).text("Edit " + resp.code);
            $("input#txtDate", this).val(resp.expiredate);
        }
    });

注意我如何创建一个名为 resp 的变量来保存 msg.d。然后我可以使用 resp.ReturnedDictionaryKey。上面我使用了使用过的代码和过期时间。我可以随意使用它们。

Answer 3

试试这个。

$("#mybutton").click(function(){
    $.ajax({
        url: '/Member/GetPinPoints/@Model.Id',
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(data) {
            //asp.net 3.5 plus wraps the return into a .d property
            var msg = data.hasOwnProperty("d") ? data.d : data;
            for(var i=0; i < msg.length; i++){
              alert(msg[i].Position);  
            }
        },
        error: function() {

        alert("error");
        }
    });
    return false;
});