从 WCF 后端填充的 jqGrid 从 POST 切换到 GET答案

【问题标题】：Switching from POST to GET for jqGrid populated from WCF back-end从 WCF 后端填充的 jqGrid 从 POST 切换到 GET
【发布时间】：2011-09-02 17:07:15
【问题描述】：

我正在尝试将我的客户端 ajax 调用和 jqGrid 转换为使用 GET 而不是 POST。

我已确认该服务按预期工作。检查了萤火虫并检查了 JSON 响应对象，它是正确的——但是我仍然在客户端丢失了一些东西，因为数据没有被填充到网格中。 firebug 中没有显示任何特定的 javascript 错误。

我的一个问题是，当使用 GET 而不是 POST 时，如何处理 .ajax() 请求的 url/data 参数。如果我可以使用特定的 UriTemplate 传递 URL 中的参数，我真的不需要通过 data 参数传递任何参数，我想？

 function getData(pdata) {

    var jqGridArgs = {
        startDate: pdata.startDate(),
        endDate: pdata.endDate()
    };

    var _url = "Service.svc/Products?s=" + 
                 jqGridArgs.startDate + "&e=" + jqGridArgs.endDate;

    $.ajax(
            {
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: _url,

                //data: JSON.stringify({ args: jqGridArgs }), // do I need this for 'GET'?

                dataType: "json",
                success: function (data, textStatus) {
                    if (textStatus == "success") {
                        var thegrid = $("#jqGrid")[0];
                        thegrid.addJSONData(data.d);
                    }
                },
                error: function (data, textStatus) {
                    alert('An error has occured retrieving data.');
                }
            });
}

还有格子代码：

var start = page.queryitem('s'); 
var end = page.queryitem('e'); 

var columnModel = [    
    { name: "ID", index: "ID", width: 175 },
    { name: "Name", index: "Name", width: 250 },
    { name: "Type", index: "Type", width: 250 }];

var columnNames = ['Product ID', 'Name', 'Type'];

$("#jqGrid").jqGrid({
        postData:
        {
           startDate: function () { return start; },
           endDate: function () { return end; },
        },
        datatype: function (pdata) {
            getData(pdata);          // calls the function above with 'postData'
        },
        colNames: columnNames,
        colModel: columnModel,
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: false,
        pagination: true,
        pager: "#jqPager",
        loadonce: true,
        sortorder: "desc",
        sortname: 'id',
        cellEdit: false
    });

这里是后端 WCF 方法：

    [WebGet( UriTemplate = "Products?s={start}&e={end}",
                 ResponseFormat = WebMessageFormat.Json)]
    public JsonGridContract WebGetProducts(string start, string end)
    {
        DateTime _start = Convert.ToDateTime(start.ReplaceIf('T', ' ')); 
        DateTime _end = Convert.ToDateTime(end.ReplaceIf('T', ' '));

        var rows = GetProducts(_start, _end).Select(x => new
             {
                 ID = x.ID,
                 Name = x.Name,
                 Type = x.Type

             }).ToJson(); 

        return new JsonGridContract() { records = rows.Count, total = rows.Count, page = 1, rows = rows }; 
    }

这是数据在到达客户端之前的封装方式：

[DataContract]
public class JsonGridContract
{
    [DataContract]
    public class JsonRow
    {
        [DataMember]
        public int id { get; set; }

        [DataMember]
        public string[] cell { get; set; }

        public JsonRow(int length)
        {
            cell = new string[length];
        }
    }

    [DataMember]
    public int page { get; set; }

    [DataMember]
    public int total { get; set; }

    [DataMember]
    public int records { get; set; }

    [DataMember]
    public List<JsonRow> rows { get; set; }

    public JsonGridContract()
    {
        rows = new List<JsonRow>();
    }

    public JsonGridContract(List<JsonRow> _rows)
    {
        rows = _rows;
    }
}

【问题讨论】：

标签： c# javascript wcf json jqgrid

【解决方案1】：

试试这个：

var jqGridArgs = {
    s: pdata.startDate(),
    e: pdata.endDate()
};

var _url = "Service.svc/Products";

$.ajax(
        {
            type: "GET",
            url: _url,
            data: jqGridArgs,
            dataType: "json",
            success: function (data) {
                var thegrid = $("#jqGrid")[0];
                thegrid.addJSONData(data.d);
            },
            error: function (data, textStatus) {
                alert('An error has occured retrieving data.');
            }
        });

无需检查是否成功，如果调用success函数，则操作成功；

因为使用您的 javascript 对象作为获取的数据传递，所以它也做得更多。 JQuery 会自动解析它并将其用于查询参数。此外，由于它是获取而不是帖子，因此不需要内容类型。

【讨论】：

【解决方案2】：

原来这里的问题是使用 GET 时没有“data.d”成员。我不确定为什么。

如此变化，

thegrid.addJSONData(data.d)

到

thegrid.addJSONData(data)

解决了这个问题。

【讨论】：