jqGrid的使用Ajax数据（JSON）：使用及在电网负荷数据QUOT; URL＆QUOT;从Azure数据库参数 [英] jqGrid with Ajax data (JSON) : load data in grid using "url" parameter from azure database
问题描述
我有一个疑问与Ajax实现。我能找到的URL参数需要被定义为service_name1.azure-mobile.net/tables/，以获取数据来填充网格。但我需要添加请求头X-谟 - 应用来定义应用程序键。要做到这一点，我想我必须作出一个HTT prequest适当的头在功能和需要的jqGrid一些参数来加载数据来设置该函数的引用。你能指出它怎么可能实现？
页面上所使用的jqGrid，以 https://service_name2.azure-mobile.net
下面是SERVICE_NAME1蔚蓝的移动服务名称和
SERVICE_NAME2是蔚蓝的Web服务的名字，我已经启用了CORS（交叉对象资源共享），用于移动服务SERVICE_NAME1 SERVICE_NAME2。
请让我知道是否需要任何额外的信息。
更新code，使其与Ajax调用工作：
的jQuery（＃list4）。jqGrid的（{
数据类型：JSON
网址：'https://mohit.azure-mobile.net/tables/Schedules'，
高度：自动，
colNames：['RowNo'，'RouteId'，'区]，
colModel：
{名称：'身份证'，索引：'ID'，宽度：50，排序：假}，
{名称：'RouteId'，索引：RouteId'，宽度：50，排序：假的，可编辑：真正的，editrules：{要求：真正}}，
{名称：'区'，索引：'区'，宽度：130，排序：假的，可编辑：真正的，editrules：{要求：真正}}，
]
rowList：[10，20，30]，
loadBeforeSend：功能（jqXHR）{
jqXHR.setRequestHeader（X-的Zumo-应用'，'的myKey'）;
}，
ajaxGridOptions：{的contentType：应用/ JSON}，
发布数据： ，
serializeGridData：功能（数据）{返回JSON.stringify（数据）;}，
呼叫器：＃pager1'，
viewrecords：真实，
标题：计划数据
// loadonce：真实，
GridView控件：真
}）;
奇怪的是，我不能捕获使用招，所以我使用（使用F12）IE开发工具栏拍摄请求这一请求。
我试着撰写使用招的请求，使用GET与URL https://mohit.azure.net/tables/附表，并设置头参数为X-谟的应用：APPKEY。我买了这个请求正确的响应（预期JSON格式的数据表）。所以，我感觉追加参数的问题。
更新code部分2
的jQuery（＃list4）。jqGrid的（{
数据类型：JSON
网址：'https://mohit.azure-mobile.net/tables/Schedules'，
高度：自动，
colNames：['RowNo'，'RouteId'，'地区']，
colModel：
{名称：'身份证'，索引：'ID'，宽度：50，排序：假}，
{名称：'RouteId'，索引：RouteId'，宽度：50，排序：假的，可编辑：真正的，editrules：{要求：真正}}，
{名称：'区'，索引：'区'，宽度：130，排序：假的，可编辑：真正的，editrules：{要求：真正}}
]
rowList：[10，20，30]，
loadBeforeSend：功能（jqXHR）{
jqXHR.setRequestHeader（X-的Zumo-应用'，'的myKey'）;
}，
loadComplete：功能（）{
//警报（OK）;
}，
loadError：功能（jqXHR，textStatus，errorThrown）{
警报（'HTTP状态code：'+ jqXHR.status +的'\\ n'+
textStatus：'+ textStatus +的'\\ n'+
errorThrown：'+ errorThrown）;
警报（'HTTP消息体（jqXHR.responseText）：'+'\\ n'+ jqXHR.responseText）;
}，
ajaxGridOptions：{的contentType：应用/ JSON，缓存：真}，
发布数据： ，
呼叫器：＃pager1'，
viewrecords：真实，
标题：计划数据
loadonce：真实，
GridView控件：真
}）; VAR inlineparams = {
restoreAfterSelect：假的，
补充：真，
编辑：真的，
保存：真实，
取消：真实，
德尔：真
}; 。jQuery的（＃list4）的jqGrid（'navGrid，＃pager1，{编辑：假的，保存：假的，加：假的，取消：假的，德尔：假}）;
jQuery的（＃list4）的jqGrid（'inlineNav'，＃pager1，inlineparams）。
}
解决方案加载数据网格的jqGrid 4.4.5版本使用Ajax方式
的jQuery（＃list4）。jqGrid的（{
数据类型：JSON
网址：'https://mohit.azure-mobile.net/tables/Schedules'，
高度：自动，
colNames：['RowNo'，'RouteId'，'地区']，
colModel：
{名称：'身份证'，索引：'ID'，宽度：50，排序：假}，
{名称：'RouteId'，索引：RouteId'，宽度：50，排序：假的，可编辑：真正的，editrules：{要求：真正}}，
{名称：'区'，索引：'区'，宽度：130，排序：假的，可编辑：真正的，editrules：{要求：真正}}，
]
rowList：[10，20，30]，
loadBeforeSend：功能（jqXHR）{
jqXHR.setRequestHeader（X-的Zumo-应用'，'的myKey'）;
}，
loadComplete：功能（）{
//警报（OK）;
}，
loadError：功能（jqXHR，textStatus，errorThrown）{
警报（'HTTP状态code：'+ jqXHR.status +的'\\ n'+
textStatus：'+ textStatus +的'\\ n'+
errorThrown：'+ errorThrown）;
警报（'HTTP消息体（jqXHR.responseText）：'+'\\ n'+ jqXHR.responseText）;
}，
ajaxGridOptions：{的contentType：应用/ JSON，缓存：真}，
发布数据： ，
呼叫器：＃pager1'，
viewrecords：真实，
标题：计划数据
loadonce：真实，
jsonReader：{repeatitems：假}，
GridView控件：真
}）;
首先我认为这个问题的标题是如何调用自定义函数加载而不是使用数据URL参数是不正确。我认为，你可以描述每个标准Ajax调用来实现，但使用JSONP类型，而不是JSON。
要设置自定义HTTP / HTTPS标头可以使用的jqGrid的 loadBeforeSend 回调里面的 setRequestHeader 方法。请参见答案。在jQuery.ajax电话里面做的jqGrid的 beforeSend 回调格内编辑的情况下。您可以使用 ajaxEditOptions 或 ajaxRowOptions 的jqGrid的选项（取决于您使用的编辑模式）设置 beforeSend jQuery.ajax调用回调函数。或者您可以使用标题 jQuery.ajax的选项（可以设置使用它的jqGrid ajaxGridOptions ， ajaxEditOptions 或 ajaxRowOptions ）。
我认为，如果你正确配置跨域资源共享（CORS）（请参阅这里），你可以使用JSONP中的jqGrid加载数据。看到这里这里例子， 和
更新时间：：我不能测试code，但我认为你应该改变一些选项/你使用回调：
- 删除
serializeGridData 是您使用POSTDATA： - 更改
数据类型：JSON到数据类型：JSONP - 更改
ajaxGridOptions：{的contentType：应用/ JSON}到ajaxGridOptions：{的contentType：应用/ JSON，缓存：真}
如果它不会帮助我会建议您使用的工具，如提琴手来跟踪HTTPS流量。你需要再激活工具内HTTPS的跟踪（请参见文档）。
更新2 ：看来，在使用的Windows Azure移动服务的情况下，你可以使用数据类型：JSON和网址：'https：//开头＆LT;＆SERVICE_NAME1 GT; .azure-mobile.net /表/＆LT;表名＆GT; 。为了让只使用它是非常重要的数据。
ajaxGridOptions：{的contentType：应用/ JSON}，
发布数据： ，
jsonReader：{
repeatitems：假的，
根：函数（OBJ）{
返回OBJ;
}
}
要能够相对于内联修改数据编辑，你应该产生具有HTTP请求
PATCH https://mstrans.azure-mobile.net/tables/<TableName>/<TableItemId> HTTP / 1.1
内容类型：应用程序/ JSON
在HTTP报头和JSON数据与修改的行，但没有不必要的 OPER 参数。要做到这一点，你可以
editurl：https://mohit.azure-mobile.net/tables/Schedules
ajaxRowOptions：{的contentType：应用/ JSON}，
serializeRowData：功能（POSTDATA）{
如果（POSTDATA = NULL＆放大器;！＆安培; postData.oper）{
删除postData.oper;
}
返回JSON.stringify（POSTDATA）;
}
在code以上会做几乎所有的什么人用，这将被用来作为URL的 https://mohit.azure-mobile.net/tables/ 而不是的<a href =https://mohit.azure-mobile.net/tables/相对=nofollow > https://mohit.azure-mobile.net/tables/ /\".
要做出最后一步可以修改网址内，例如 oneditfunc jqGridInlineEditRow 事件：
VAR inlineparams = {
editParams：{MTYPE：补丁，按键：真正}，
addParams：{
addRowParams：{MTYPE：POST键：真正}
}
};jQuery的（＃list4）。绑定（jqGridInlineEditRow功能（即ROWID，期权）{
如果（options.mtype ===补丁）{
options.url =https://mohit.azure-mobile.net/tables/Schedules/+
EN codeURIComponent（ROWID）;
}
}）;
I have one doubt with ajax implementation. I could find that "url" parameter need to be defined as "service_name1.azure-mobile.net/tables/" to fetch data to populate grid. But I need to add request header "X-ZUMO-APPLICATION" to define application key. To accomplish this, I think I have to make a httprequest with proper headers in a function and need to set reference of that function in some parameter of jqGrid to load data. Can you point out how is it possible to achieve?
Page on which jqGrid is used, starts with "https://service_name2.azure-mobile.net"
Here service_name1 is azure mobile service name and service_name2 is azure web service name and I have enabled CORS (cross object resource sharing) for service_name2 on mobile service service_name1.
Please let me know if any additional information is required
Updated code to make it work with Ajax call :
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
});
Weird thing is, I am not able to capture this request using fiddler so I am capturing request using IE developer toolbar (using F12). I tried composing a request using fiddler, used GET with url'https://mohit.azure.net/tables/Schedules' and set header parameter as X-ZUMO-APPLICATION : appKey. I got proper response (expected JSON formatted table data) with this request. So I am feeling appended parameters are issue.
Update code part 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);
}
Solution for loading data in grid with jqGrid version 4.4.5 using Ajax way
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
});
First of all I think the the title of the question "how to call custom function to load data instead of using "url" parameter" is incorrect. I think that what you describe could be implemented per standard Ajax call, but using JSONP type instead of JSON.
To set custom HTTP/HTTPS headers you can use setRequestHeader method of inside of loadBeforeSend callback of jqGrid. See the answer. In case of editing of grid inside of beforeSend callback of jQuery.ajax call which do jqGrid. You can use ajaxEditOptions or ajaxRowOptions option of jqGrid (depend on editing mode which you use) to set the beforeSend callback of jQuery.ajax call. Alternatively you can use headers option of jQuery.ajax (one can set it in jqGrid using ajaxGridOptions, ajaxEditOptions or ajaxRowOptions).
I think that if you configured correctly Cross-Origin Resource Sharing (CORS) (see here) you could use JSONP in jqGrid to load the data. See examples here, here and here.
UPDATED: I can't test the code, but I think you should change some options/callbacks which you use:
- remove
serializeGridDatais you usepostData: "" - change
datatype: "json"todatatype: "jsonp" - change
ajaxGridOptions: { contentType: "application/json" }toajaxGridOptions: { contentType: "application/json", cache: true }
If it will not help I would recommend you to use tools like Fiddler to trace HTTPS traffic. You will need additionally activate tracing of HTTPS inside the tool (see the documentation).
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);
}
});
这篇关于jqGrid的使用Ajax数据（JSON）：使用及在电网负荷数据QUOT; URL＆QUOT;从Azure数据库参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
