带有Ajax数据的jqGrid（JSON）：使用azure数据库中的“url”参数在网格中加载数据

我对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’并将header参数设置为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); } 

使用Ajax方式使用jqGrid版本4.4.5在网格中加载数据的解决方案

  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 }); 

Answer 1

首先，我认为问题的标题是“如何调用自定义函数来加载数据而不是使用”url“参数”是不正确的。 我认为你描述的内容可以按照标准的Ajax调用实现，但是使用JSONP类型而不是JSON。

要设置自定义HTTP / HTTPS标头，您可以使用loadBeforeSend回调内部的setRequestHeader方法。 看到答案 。 如果在jQuery.ajax调用的beforeSend回调中编辑了jqGrid的内部网格。 您可以使用ajaxEditOptions或ajaxRowOptions选项（取决于您使用的编辑模式）来设置jQuery.ajax调用的beforeSend回调。 或者，您可以使用jQuery.ajax的headers选项（可以使用ajaxGridOptions ， ajaxEditOptions或ajaxRowOptions在jqGrid中设置它）。

我认为，如果您正确配置了跨源资源共享（CORS）（请参阅此处 ），您可以在jqGrid中使用JSONP来加载数据。 请参阅此处 ， 此处和此处的示例。

更新 ：我无法测试代码，但我认为你应该改变你使用的一些选项/回调：

1. 删除serializeGridData是你使用postData: ""
2. 将datatype: "json"更改为datatype: "jsonp"
3. 将ajaxGridOptions: { contentType: "application/json" }更改为ajaxGridOptions: { contentType: "application/json", cache: true }

如果它没有用，我建议你使用像Fiddler这样的工具来跟踪HTTPS流量。 您还需要在工具中激活HTTPS的跟踪（请参阅文档）。

更新2 ：似乎在使用Windows Azure移动服务的情况下，您可以使用datatype: "json"和url: 'https://.azure-mobile.net/tables/' 。 要获取数据，重要的只是使用

 ajaxGridOptions: { contentType: "application/json" }, postData: "", jsonReader: { repeatitems: false, root: function (obj) { return obj; } } 

为了能够根据内联编辑修改数据，您应该生成具有的HTTP请求

 PATCH https://mstrans.azure-mobile.net/tables// HTTP/1.1 Content-Type: application/json 

在HTTP标头和带有修改行的JSON数据中，但没有不需要的oper参数。 要做到这一点，你可以

 editurl: "https://mohit.azure-mobile.net/tables/Schedules", ajaxRowOptions: { contentType: "application/json" }, serializeRowData: function (postData) { if (postData != null && postData.oper) { delete postData.oper; } return JSON.stringify(postData); } 

上面的代码将完成几乎所有需要的代码，但它将用作URL“ https://mohit.azure-mobile.net/tables/ ”而不是“ https://mohit.azure-mobile.net” / tables / /“

要进行最后一步，可以修改内部的url ，例如oneditfunc回调或更好的jqGridInlineEditRow事件：

 var inlineparams = { editParams: { mtype: "PATCH", keys: true}, addParams: { addRowParams: { mtype: "POST", keys: true } } }; jQuery("#list4").bind("jqGridInlineEditRow", function (e, rowid, options) { if (options.mtype === "PATCH") { options.url = "https://mohit.azure-mobile.net/tables/Schedules/" + encodeURIComponent(rowid); } });