Ajax 数据源(对象):TypeError: f 未定义 [英] Ajax data source (objects) :TypeError: f is undefined

问题描述

我正在开发我的 ASP.Net Web 应用程序，我必须在其中使用 Ajax 数据源填充 HTML 表，我正在使用 jQuery DataTables 插件.

I am working on my ASP.Net web application where I have to populate an HTML table with Ajax data source for which I am making a use of jQuery DataTables plugin.

HTML 代码:

<table class="table table-striped table-hover table-bordered display" id="example" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Prctice Group Risk No
            </th>
            <th>Practice_Group
            </th>
            <th>Risk_Category
            </th>
        </tr>
    </thead>
</table>

JavaScript 代码:

$('#example').DataTable({
    "ajax": {
        "dataType": 'json',
        "contentType": "application/json; charset=utf-8",
        "type": "POST",
        "url":"index.aspx/Risky"
    },
    "columns": [
        { "data": "Prctice_Group_Risk_No" },
        { "data": "Practice_Group" },
        { "data": "Risk_Category" }]
});

这是我的 Web 方法，我正在调用以获取对象列表的 JSON 响应

And here is my Web Method I am making a call to to get a JSON response of list of objects

 [WebMethod]
 [ScriptMethod]
    public static string Risky()
    {
        return JsonConvert.SerializeObject(riskList);
    }

来自服务器的 JSON 响应:

d:"[{"Prctice_Group_Risk_No":1,"Practice_Group":"M&A","Risk_Category":"Conflicts of Interests"},{"Prctice_Group_Risk_No":2,"Practice_Group":"abc","Risk_Category":"Client Care and Communication"}]

返回的 JSON 响应对我来说似乎很好，如 jquery DataTables 的官方网站中所述http://www.datatables.net/examples/ajax/objects.html

The JSON response returned seems fine to me as described in the official site of jquery DataTables http://www.datatables.net/examples/ajax/objects.html

但是表中没有填充任何数据，我的 Firebug 控制台出现以下错误

But no data is been populated in the table and I get the following error in my Firebug Console

类型错误:f 未定义

推荐答案

默认情况下，jQuery DataTables 需要以下格式的 Ajax 源数据.

By default, jQuery DataTables expects Ajax sourced data in the following format.

{ 
   "data": [

   ]
}

如果数据格式不同，需要使用ajax.dataSrc 定义表数据的数据属性(在您的示例中为 d).

If data format differs, you need to use ajax.dataSrc to define data property for table data (d in your example).

我不是 ASP.NET 专家，但您似乎以 JSON 格式对数据进行了两次编码.

I'm not ASP.NET expert but it seems that you encode your data in JSON format twice.

对于您当前的服务器端代码，试试这个 JavaScript 代码:

For your current server-side code, try this JavaScript code:

$('#example').DataTable({
    "ajax": {
        "dataType": 'json',
        "contentType": "application/json; charset=utf-8",
        "type": "POST",
        "url":"index.aspx/Risky",
        "dataSrc": function (json) {
           return $.parseJSON(json.d);
        }
    },
    "columns": [
        { "data": "Prctice_Group_Risk_No" },
        { "data": "Practice_Group" },
        { "data": "Risk_Category" }
    ]
});

参见 jQuery 数据表:常见 JavaScript 控制台错误，了解有关此错误和其他常见控制台错误的更多信息.

See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.

这篇关于Ajax 数据源(对象):TypeError: f 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！