Ajax web方法，返回JSOn数据答案

【问题标题】：Ajax webmethod, returning JSOn dataAjax web方法，返回JSOn数据
【发布时间】：2013-08-02 12:15:32
【问题描述】：

我在使用 Web 方法 (c#) 使用 JSON 数据填充 JQuery DataTable 表时遇到一些问题。

Ajax 调用：

function loadTable(message) {
            $.ajax({
                type: "POST",
                url: "TestBed.aspx/ValueDateSummary",
                cache: false,
                data: JSON.stringify({ senderBIC: senderBIC }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");

                    alert(err.Message);

                },
                success: function (msg) {

                    var data = msg.d;
                    alert(data["counter"]);
                    alert(data);
                    alert(typeof msg);
                    var otable = $("#test").dataTable({
                       // "sAjaxDataProp": msg.d,
                        "aoColumns": [
                            { "mDataProp": "counter" },
                            { "mDataProp": "SessionID" },
                            { "mDataProp": "MsgType" }
                        ]
                    });
                }
            });
        };

没有错误，但是数据表是空的。

这是警报的结果

警报（数据[“计数器”]）=未定义

alert(data) = [{"counter":3,"SessionID":"1","MsgType":"103","ValueDate":"2007-08-01","Sender":"1 "}, {"counter":7,"SessionID":"2","MsgType":"103","ValueDate":"2009-05-26","Sender":"2"}]

alert(typeof msg) = 对象

知道为什么我的桌子是空的吗？

* 编辑 * 这是最终成功的方法

success: function (msg) {
                    var data = JSON.parse(msg.d);

                    $("#test").dataTable({
                        "aaData": data,
                        "aoColumns": [{
                            "mDataProp": "counter"
                        }, {
                            "mDataProp": "SessionID"
                        }, {
                            "mDataProp": "MsgType"
                        }]
                    });
                }

【问题讨论】：

标签： c# jquery datatables

【解决方案1】：

你永远不会设置oTable的数据...

你必须给它一个Array of Arrays (var object = [][])：

您可以将其作为ajax 并将您的$ajax 代码放入fnServerData 函数中

或执行以下操作：（取自example from DataTables）

function loadTable(message) {
    $.ajax({
        type: "POST",
        url: "TestBed.aspx/ValueDateSummary",
        cache: false,
        data: JSON.stringify({
            senderBIC: senderBIC
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function (xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");

            alert(err.Message);
        },
        success: function (msg) {
            var data = [];

            $.map(msg.d, function (item) {
                {
                    var row = [];

                    row.push(
                        item.counter,
                        item.SessionID,
                        item.MsgType
                        //Commented out because you didn't include them in your aoColumns declaration, if you want them in the table to access later just make them non-visible.
                        //item.ValueDate,
                        //item.Sender
                    );
                    data.push(row);
                }
            });

            var otable = $("#test").dataTable({
                "aaData": data,
                "aoColumns": [
                    {"mDataProp": "counter"},
                    {"mDataProp": "SessionID"},
                    {"mDataProp": "MsgType"}
                ]
            });
        }
    });
}

从jQuery DataTables 1.7.2 开始，您可以使用array of objects as a data source，但只能使用ajax source (sAjaxSource)，而且速度稍慢，因为它只是手动将其复制到array or arrays。

【讨论】：

不确定在我批准后您是否还能看到这些 cmets，但上面有语法错误。期待})
Firebug 错误：TypeError: invalid 'in' operand obj [Break On This Error] typeof length === "number" && length > 0 && (length - 1) in obj );
我感觉快到了，一定是很明显我看不到的东西 :-)
您的页面是否在公共服务器上？我很高兴找到它并尝试为您解决问题，否则这就是它所说的类型不匹配变量长度不是数字
不是。这是一种耻辱。如果你愿意，我可以把 json 数据发给你吗？

【解决方案2】：

尝试将您的成功函数更改为以下内容：

var data = msg.d;
alert(data["counter"]);
alert(data);
alert(typeof msg);

var rows = [];
for (var i = 0; i < data.length; i++) {
    rows.push([
        data[i].counter,
        data[i].SessionID,
        data[i].MsgType,
        data[i].ValueDate,
        data[i].Sender
    ]);
}

var otable = $("#test").dataTable({
    "aaData": rows
});

【讨论】：