对于从WCF后端填充的jqGrid，从POST切换到GET

本文关键字：POST GET WCF 后端 填充 jqGrid | 更新日期: 2023-09-27 18:07:28

我试图将我的客户端ajax-call和jqGrid转换为使用GET而不是POST。

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

我有一个问题是如何接近url/数据参数的.ajax()请求时使用GET而不是POST。我不需要通过data参数传递任何参数如果我能在URL中通过特定的UriTemplate传递参数，我想?

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

对于从WCF后端填充的jqGrid，从POST切换到GET

试试这个:

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对象作为get的数据传递也更方便。JQuery将自动解析它并将其用于查询参数。另外，因为它是get，而不是post，所以不需要内容类型

原来这里的问题是没有数据。使用GET时的d'成员。我不知道为什么。

改变，

thegrid.addJSONData(data.d)


thegrid.addJSONData(data)

修复了这个问题。

相关文章：