无法使用 JavaScript 方法加载 JQuery EasyUI 数据网格答案

【问题标题】：Cannot load JQuery EasyUI datagrid using JavaScript approach无法使用 JavaScript 方法加载 JQuery EasyUI 数据网格
【发布时间】：2015-04-12 08:02:59
【问题描述】：

我用的是JQuery EasyUI的datagrid是一个很基础的实现。

如果我使用内联方法加载数据，一切都很好并且数据显示（注意 JSON API 正在工作，因为我在服务器上启用了 CORS，所以这不是问题）：

<table class="easyui-datagrid"
        data-options="url:'https://www.driverlive.co.uk/rest/api/PushMessage/GetPushDriverMessagesList?DeviceId=a99f8a977696bfb9&DateFrom=2014-10-27T00:00:00&DateTo=2015-11-11T00:00:00',method:'get',singleSelect:true,fit:true,fitColumns:true">
    <thead>
        <tr>
            <th data-options="field:'PushDriverMessageDBID'" width="80">Item ID</th>
            <th data-options="field:'PushDriverMessageGuid'" width="100">PushDriverMessageGuid</th>
            <th data-options="field:'AppKey',align:'right'" width="80">AppKey</th>
            <th data-options="field:'PushNotificationMessage',align:'right'" width="300">PushNotificationMessage</th>
            <th data-options="field:'Sender'" width="150">Sender</th>
            <th data-options="field:'MessageDated',align:'center'" width="50">MessageDated</th>
        </tr>
    </thead>
</table>

如果我尝试使用 JavaScript 加载数据网格的方式，我没有得到任何数据，但我不明白为什么？

// Dispatching DataGrid
var JSONDispatchingURL = "https://www.driverlive.co.uk/rest/api/PushMessage/GetPushDriverMessagesList?DeviceId=a99f8a977696bfb9&DateFrom=2014-10-27T00:00:00&DateTo=2015-11-11T00:00:00";
        $('#DGDispatching').datagrid({
            url: JSONDispatchingURL,
            columns: [[
                { field: 'PushDriverMessageDBID', title: 'PushDriverMessageDBID', width: 100 },
                { field: 'PushDriverMessageGuid', title: 'PushDriverMessageGuid', width: 100 },
                { field: 'AppKey', title: 'AppKey', width: 100 },
                { field: 'PushNotificationMessage', title: 'PushNotificationMessage', width: 100 },
                { field: 'Sender', title: 'Sender', width: 100 },
                { field: 'MessageDated', title: 'MessageDated', width: 100}
            ]]
        });

我在这里使用 JSFiddle 得到相同的结果：http://jsfiddle.net/b6fxs2v2/1/

我已按照此处的说明进行操作：http://www.jeasyui.com/documentation/datagrid.php 所以我有点迷路了......

【问题讨论】：

标签： jquery datagrid jquery-easyui

【解决方案1】：

好的。我启动了 Fiddler，它显示 JQuery EasyUI 正在使用 POST 而不是 GET 调用该服务。因此，REST API 以 405 响应。响应具体为 {"Message":"The requested resource does not support http method 'POST'."}

我找到了类似的this SO post，然后修改了我的代码，如下所示。然后就成功了！

var JSONDispatchingURL = "https://www.driverlive.co.uk/rest/api/PushMessage/GetPushDriverMessagesList?DeviceId=a99f8a977696bfb9&DateFrom=2014-10-27T00:00:00&DateTo=2015-11-11T00:00:00";
        $('#DGDispatching').datagrid({
            url: JSONDispatchingURL,
            method: 'get',
            columns: [[
                { field: 'PushDriverMessageDBID', title: 'PushDriverMessageDBID', width: 100 },
                { field: 'PushDriverMessageGuid', title: 'PushDriverMessageGuid', width: 100 },
                { field: 'AppKey', title: 'AppKey', width: 100 },
                { field: 'PushNotificationMessage', title: 'PushNotificationMessage', width: 100 },
                { field: 'Sender', title: 'Sender', width: 100 },
                { field: 'MessageDated', title: 'MessageDated', width: 100 }
            ]]
        });

【讨论】：