0

我能够将表单数据从 ajax 脚本传递到 ASP.Net Web 服务并接收 JSON 对象作为响应,效果很好。当我在 JQ Grid 中使用相同的参数进行相同的调用时,我收到“无效的 Web 服务调用”或“无效的 JSON 原语”作为响应。

我相信这与以下帖子相当接近,我已经应用了这些建议(以及许多其他帖子的建议),但没有成功。 JQGrid - 无法调用 ASP.NET WebMethod 但可以使用 Ajax

下面的 Ajax 代码是成功的,它将表单参数传递给 Web 服务并以 JSON 格式检索结果。

Ajax Javascript 代码: 此代码有效,它是 JQ Grid(在下方),这就是问题所在

<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 Grid 代码失败:

<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: \u0027formVars\u0027.","StackTrace":"   at System.Web.Script.Services.WebServiceMethodData.CallMethod(Object target, IDictionary`2 parameters)\r\n

或者,如果我注释掉“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()\r\n ......

关于为什么它不起作用的任何可靠的想法?我花了几天的时间试图让它以这种方式工作。虽然我可以通过执行 Ajax 调用并将数据存储在变量中并将其设置为 JQ Grid 来使其工作,但我需要来自 JQ GRid 的直接 Web 服务调用才能用于过滤和其他事情......

提前致谢 :)

编辑: - 使用 JQ Grid v4.3.2 - 发送到 Web 服务的 JSON 数据已使用http://jsonlint.com/进行了验证(这是上面 javascript 代码中的变量“searchParams”)

4

3 回答 3

2

您在通话中{}(参见/*here*/)中使用的内容

grid.jqGrid({/*here*/});

jqGrid 参数jqGrid 选项。在这里使用是错误的,dataFilter因为 jqGrid 只会忽略该选项。以同样的方式 jqGrid 不知道dataType选项并且它忽略dataType: 'json'. datatype(注意字母大小写)的默认值为'xml'. 因为来自服务器的 JSON 响应是错误的 XML 文件,您将收到错误消息。

以同样的方式data,jqGrid 的参数将被以另一种方式使用。您应该改用postData参数。重要的是要了解您应该使用类似grid.jqGrid({/*here*/}); once的代码创建 jqGrid 。因此,如果您希望在分页、排序或过滤数据时将表单中的当前"#searchForm"发送到服务器,您应该将其定义formVarsfunction。有关更多详细信息,请参阅答案。如果您使用,那么在回调中添加属性mtype: 'POST'可能会很容易。formVarsserializeGridData

因此,您应该将当前代码重写为以下内容:

$(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),您应该相信增加rowNumtorowNum: 10000例如,删除rowList和其他寻呼机信息的值(请参阅文档pgbuttons: false, pginput: false:此外,您可以使用

serializeGridData: function () {
    return JSON.stringify({formVars: $("#searchForm").serializeArray()});
}

在这种情况下 jqGrid 将只发送formVars到服务器。

于 2012-05-28T10:39:48.960 回答
0

您需要包含 Web 服务的预期参数名称,例如

var grid = $("#tblResults");
        grid.jqGrid({
            url: "./WebService/Service.asmx/doSearch",
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            data:{u0027formVars: searchParams},

前一个代码是成功的,因为其中包含了输入参数名称

于 2012-05-28T05:18:42.767 回答
0

您需要像这样传递数据:

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);
  }
});
};
于 2012-05-28T06:22:24.793 回答