1

我对 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
    });
4

1 回答 1

0

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

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

我认为，如果您正确配置了跨域资源共享 (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 跟踪（请参阅文档）。

UPDATED 2: It seems that in case of usage Windows Azure Mobile Services you can use datatype: "json" and url: 'https://<service_name1>.azure-mobile.net/tables/<TableName>'. To get the data it's important only to use

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

To be able to modify the data with respect of inline editing you should produce HTTP request having

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

in the HTTP header and JSON data with the modified row, but without unneeded oper parameter. To do this you can

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

The code above will do almost all what one need with the exception that it will be used as URL "https://mohit.azure-mobile.net/tables/" instead of "https://mohit.azure-mobile.net/tables//".

To make the last step one can modify url inside of for example oneditfunc callback of inlineparams or better jqGridInlineEditRow event:

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);
    }
});
于 2013-04-07T20:26:45.907 回答