我对 ajax 实现有一个疑问。我会发现“url”参数需要定义为“service_name1.azure-mobile.net/tables/”来获取数据以填充网格。但我需要添加请求头“X-ZUMO-APPLICATION”来定义应用程序密钥。为了做到这一点，我认为我必须在函数中使用正确的标头创建一个 httprequest，并且需要在 jqGrid 的某些参数中设置该函数的引用以加载数据。您能指出如何实现吗？
使用 jqGrid 的页面以“ https://service_name2.azure-mobile.net ”开头
这里 service_name1 是 azure 移动服务名称，service_name2 是 azure Web 服务名称，我在移动服务 service_name1 上为 service_name2 启用了 CORS（跨对象资源共享）。
如果需要任何其他信息，请告诉我
更新了代码以使其与 Ajax 调用一起使用：
jQuery("#list4").jqGrid({
datatype: "json",
url : 'https://mohit.azure-mobile.net/tables/Schedules',
height: "auto",
colNames: ['RowNo', 'RouteId', 'Area],
colModel: [
{ name: 'id', index: 'id', width: 50, sortable: false },
{ name: 'RouteId', index: 'RouteId', width: 50, sortable: false, editable: true, editrules: { required: true} },
{ name: 'Area', index: 'Area', width: 130, sortable: false, editable: true, editrules: { required: true} },
],
rowList: [10, 20, 30],
loadBeforeSend: function(jqXHR) {
jqXHR.setRequestHeader('X-ZUMO-APPLICATION', 'mykey');
},
ajaxGridOptions: { contentType: "application/json" },
postData: "",
serializeGridData: function (data) {return JSON.stringify(data);},
pager: '#pager1',
viewrecords: true,
caption: "Schedule Data",
//loadonce: true,
gridview: true
});
奇怪的是，我无法使用 fiddler 捕获此请求，因此我正在使用 IE 开发人员工具栏（使用 F12）捕获请求。我尝试使用 fiddler 编写请求，使用 GET 和 url' https://mohit.azure.net/tables/Schedules '并将标头参数设置为 X-ZUMO-APPLICATION : appKey。我得到了这个请求的正确响应（预期的 JSON 格式的表格数据）。所以我觉得附加参数有问题。
更新代码第 2 部分
jQuery("#list4").jqGrid({
datatype: "json",
url : 'https://mohit.azure-mobile.net/tables/Schedules',
height: "auto",
colNames: ['RowNo', 'RouteId', 'Area'],
colModel: [
{ name: 'id', index: 'id', width: 50, sortable: false },
{ name: 'RouteId', index: 'RouteId', width: 50, sortable: false, editable: true, editrules: { required: true} },
{ name: 'Area', index: 'Area', width: 130, sortable: false, editable: true, editrules: { required: true} }
],
rowList: [10, 20, 30],
loadBeforeSend: function(jqXHR) {
jqXHR.setRequestHeader('X-ZUMO-APPLICATION', 'myKey');
},
loadComplete: function () {
//alert("OK");
},
loadError: function (jqXHR, textStatus, errorThrown) {
alert('HTTP status code: ' + jqXHR.status + '\n' +
'textStatus: ' + textStatus + '\n' +
'errorThrown: ' + errorThrown);
alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
},
ajaxGridOptions: { contentType: "application/json", cache: true },
postData: "",
pager: '#pager1',
viewrecords: true,
caption: "Schedule Data",
loadonce: true,
gridview: true
});
var inlineparams = {
restoreAfterSelect: false,
add: true,
edit: true,
save: true,
cancel: true,
del: true
};
jQuery("#list4").jqGrid('navGrid', "#pager1", { edit: false, save: false, add: false, cancel: false, del: false });
jQuery("#list4").jqGrid('inlineNav', "#pager1", inlineparams);
}
jqGrid 4.4.5版本使用ajax方式加载网格数据的解决方案
jQuery("#list4").jqGrid({
datatype: "json",
url : 'https://mohit.azure-mobile.net/tables/Schedules',
height: "auto",
colNames: ['RowNo', 'RouteId', 'Area'],
colModel: [
{ name: 'id', index: 'id', width: 50, sortable: false },
{ name: 'RouteId', index: 'RouteId', width: 50, sortable: false, editable: true, editrules: { required: true} },
{ name: 'Area', index: 'Area', width: 130, sortable: false, editable: true, editrules: { required: true} },
],
rowList: [10, 20, 30],
loadBeforeSend: function(jqXHR) {
jqXHR.setRequestHeader('X-ZUMO-APPLICATION', 'myKey');
},
loadComplete: function () {
//alert("OK");
},
loadError: function (jqXHR, textStatus, errorThrown) {
alert('HTTP status code: ' + jqXHR.status + '\n' +
'textStatus: ' + textStatus + '\n' +
'errorThrown: ' + errorThrown);
alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
},
ajaxGridOptions: { contentType: "application/json", cache: true },
postData: "",
pager: '#pager1',
viewrecords: true,
caption: "Schedule Data",
loadonce: true,
jsonReader: {repeatitems: false},
gridview: true
});