我能够从 ajax 脚本将表单数据传递给 ASP.Net Web 服务并接收 JSON 对象作为响应,效果很好。当我在 JQ 网格中使用相同的参数进行相同的调用时,我收到"无效的 Web 服务调用"或"无效的 JSON 原语"作为响应。
我相信这与下面的帖子相当接近,我已经应用了建议(以及许多其他帖子的建议),但没有成功。JQGrid - 不能调用 ASP.NET WebMethod,但可以使用Ajax
以下 Ajax 代码成功,它将表单参数传递给 Web 服务并以 JSON 格式检索结果。
Ajax Javascript代码: 这段代码有效,JQ网格(下面进一步)是问题所在
<script language="JavaScript">
function populateResults() {
var arForm = $("#searchForm").serializeArray();
$.ajax({
type: "POST",
url: "./WebService/Service.asmx/doSearch",
data: JSON.stringify({ formVars: arForm }),
contentType: "application/json",
dataFilter: function(data) {
var msg = eval('(' + data + ')');
if (msg.hasOwnProperty('d'))
return msg.d;
else
return msg;
},
success: function(msg) {
// This will now output the same thing
// across any current version of .NET.
//console.log(msg.foo);
}
});
};
</script>
网络服务:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string doSearch(NameValue[] formVars)
{...
问题:以下是我失败的 JQ 网格代码:
<script type="text/javascript">
function populateResults() {
var arForm = $("#searchForm").serializeArray();
var searchParams = JSON.stringify({ formVars: arForm });
var grid = $("#tblResults");
grid.jqGrid({
url: "./WebService/Service.asmx/doSearch",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
data: searchParams,
dataType: 'json',
dataFilter: function(data) {
var msg = eval('(' + data + ')');
alert(msg.d);
if (msg.hasOwnProperty('d'))
return msg.d;
else
return msg;
},
mtype: 'POST',
colNames:['Exam Date','Type','Name','UR Number','Pathology Type','Result Date','Modality', 'Results'],
colModel:[
{name:'resExamDate',index:'resExamDate', editable:false, width:120},
{name:'resType',index:'resType', editable:false, width:60},
{name:'name',index:'name', editable:false, width:120},
{name:'urnumber',index:'urnumber', width:65, sorttype:'int'},
{name:'resPathologyType',index:'resPathologyType', editable:false, width:120},
{name:'resResultDate',index:'resResultDate', editable:false, width:120},
{name:'resModality',index:'resModality', editable:false, width:170, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'}},
{name:'results',index:'results', editable:false, width:240, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'}}
],
rowNum:10,
rowList:[5,10,20],
pager: '#pager',
sortname: 'surname',
viewrecords: true,
sortorder: "desc",
height: "100%",
processData: false, //jquery will stringify again apparently: https://stackoverflow.com/questions/6471759/invalid-web-service-call-missing-value-for-parameter
serializeGridData: function (postData) { return JSON.stringify(postData); },
jsonReader: {
total: "total",
page: "page",
records: "records",
root: "rows",
id: "id",
cell: "cell",
repeatitems: false
}
});
}
</script>
在Firebug中,我收到:
Post
{"_search":false,"nd":1338180778103,"rows":10,"page":1,"sidx":"surname","sord":"desc"}
Response
{"Message":"Invalid web service call, missing value for parameter: u0027formVarsu0027.","StackTrace":" at System.Web.Script.Services.WebServiceMethodData.CallMethod(Object target, IDictionary`2 parameters)rn
或者,如果我注释掉"serializeGridData:"行(我想我正在序列化它两次或其他什么,所以我尝试注释掉它),我得到:
Post:
_search=false&nd=1338180203206&rows=10&page=1&sidx=surname&sord=desc
Response:
{"Message":"Invalid JSON primitive: _search.","StackTrace":" at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()rn ......
关于为什么它不起作用的任何可靠想法?我花了几天时间试图让它以这种方式工作。虽然我可以通过执行 Ajax 调用并将数据存储在变量中并将其设置为 JQ 网格来使其工作,但我需要来自 JQ GRid 的直接 Web 服务调用才能用于过滤和其他事情......
提前致谢:)
编辑:- 使用 JQ 网格 v4.3.2- 发送到 Web 服务的 JSON 数据已使用 http://jsonlint.com/进行验证(这是上面 JavaScript 代码中的变量 "searchParams")
在调用的{}
内使用的内容(请参阅/*here*/
)
grid.jqGrid({/*here*/});
是 jqGrid 参数或 jqGrid 选项。在这里使用dataFilter
是错误的,因为jqGrid只会忽略该选项。同样,jqGrid不知道dataType
选项,它忽略了dataType: 'json'
。datatype
的默认值(请注意字母大小写)为 'xml'
。由于来自服务器的 JSON 响应是错误的 XML 文件,因此您将收到错误。
以同样的方式data
jqGrid的参数将以另一种方式使用。应改用postData
参数。重要的是要了解您应该像grid.jqGrid({/*here*/});
一次一样使用代码创建 jqGrid。因此,如果您希望在分页,排序或过滤数据时将表单"#searchForm"
中的当前值发送到服务器,则应formVars
定义为函数。有关更多详细信息,请参阅答案。如果使用mtype: 'POST'
则在回调中添加formVars
属性可能很容易serializeGridData
。
因此,您应该将当前代码重写为以下内容:
$(function () {
var grid = $("#tblResults");
grid.jqGrid({
url: "./WebService/Service.asmx/doSearch",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
// extend the parameter which will be send to the server
postData.formVars = $("#searchForm").serializeArray();
// serialize the parameters as JSON string
return JSON.stringify(postData);
},
datatype: 'json',
mtype: 'POST',
colNames:['Exam Date','Type','Name','UR Number','Pathology Type','Result Date','Modality', 'Results'],
colModel:[
{name:'resExamDate',index:'resExamDate', width:120},
{name:'resType',index:'resType', width:60},
{name:'name',index:'name', width:120},
{name:'urnumber',index:'urnumber', width:65},
{name:'resPathologyType',index:'resPathologyType', width:120},
{name:'resResultDate',index:'resResultDate', width:120},
{name:'resModality',index:'resModality', width:170,
cellattr: function () {
return ' style="white-space: normal;"'
}},
{name:'results',index:'results', width:240,
cellattr: function () {
return ' style="white-space: normal;"'
}}
],
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
sortname: 'surname',
viewrecords: true,
sortorder: "desc",
height: "100%",
jsonReader: {
root: function (obj) { return obj.d; },
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.d.length; }
}
});
});
此外,您的服务器部分似乎没有实现数据分页。如果它忽略了所有标准的jqGrid参数(rows
,page
,sidx
,sord
),你应该确认增加rowNum: 10000
rowNum
的值,例如,删除rowList
和其他寻呼机信息(见文档):pgbuttons: false, pginput: false
。此外,您可以使用
serializeGridData: function () {
return JSON.stringify({formVars: $("#searchForm").serializeArray()});
}
在这种情况下,jqGrid 只会向服务器发送formVars
。
您需要包含 Web 服务的预期参数名称,例如
var grid = $("#tblResults");
grid.jqGrid({
url: "./WebService/Service.asmx/doSearch",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
data:{u0027formVars: searchParams},
以前的代码是成功的,因为那里包含了输入参数名称
您需要像这样传递数据:
function populateResults() {
var arForm = $("#searchForm").serializeArray();
var formvars = JSON.stringify(arForm);
$.ajax({
type: "POST",
url: "./WebService/Service.asmx/doSearch",
data: "{'formVars':'" + formvars + "'}",
contentType: "application/json",
dataFilter: function(data) {
var msg = eval('(' + data + ')');
if (msg.hasOwnProperty('d'))
return msg.d;
else
return msg;
},
success: function(msg) {
// This will now output the same thing
// across any current version of .NET.
//console.log(msg.foo);
}
});
};