2011-09-02 76 views
0

我想轉換我的客戶端ajax調用和jqGrid到使用GET而不是POST。從POST切換到GET從jCFG後端填充jqGrid

我已確認該服務按預期工作。檢查了firebug並檢查了JSON響應對象,這是正確的 - 但是我仍然在客戶端丟失了一些東西,因爲數據沒有被填充到網格中。沒有具體的JavaScript錯誤出現在螢火蟲說到。

我有一個問題是如何在使用GET而不是POST時處理.ajax()請求的url/data參數。我真的不需要通過數據參數傳遞任何參數,如果我只能通過特定的UriTemplate傳遞URL中的參數,我想呢?

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

回答

0

這裏發現問題是使用GET時沒有'data.d'成員。我不知道爲什麼。

因此改變,

thegrid.addJSONData(data.d) 

thegrid.addJSONData(data) 

解決了這一問題。

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將自動解析它並將其用於查詢參數。 此外,既然它是一個get,而不是一個帖子,不需要內容類型。