如何使用jqGrid将JSON发送到服务器？

[编辑]（我等不及3个小时回答我的问题）：好吧，看起来它不是错误的jqGrid组件，这要归功于TheCodeDestroyer的计算。如何使用jqGrid将JSON发送到服务器？

我测试此代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<title>My First Grid</title> 

<link rel="stylesheet" type="text/css" media="screen" href="./css/smoothness/jquery-ui-1.10.3.custom.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" /> 

<style> 
html, body { 
    margin: 0; 
    padding: 0; 
    font-size: 100%; 
} 
</style> 

<script src="./js/jquery-1.9.0.min.js" type="text/javascript"></script> 
<script src="./js/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="./js/jquery.jqGrid.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 


$(function() { 
    $("#list").jqGrid({   
     url:'datas.php', 
     datatype: "json", 
     mtype: "GET", 
     colNames: ["ID","Client", "Projet", "Tache", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"], 
      colModel: [ 
       { name: "id_record", width: 55, hidden:false}, 
       { name: "client", width: 55, sortable:true}, 
       { name: "projet", width: 150, align: "right", sortable:true}, 
       { name: "tache", width: 150, align: "right", sortable:true}, 
       { name: "un", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "deux", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "trois", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "quatre", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "cinq", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "six", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "sept", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "huit", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "neuf", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "dix", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "onze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "douze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "treize", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "quatorze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "quinze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "seize", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "dix-sept", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "dix-huit", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "dix-neuf", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "vingt", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "vingt-et-un", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "vingt-deux", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "vingt-trois", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "vingt-quatre", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "vingt-cinq", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "vingt-six", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "vingt-sept", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "vingt-huit", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "vingt-neuf", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "trente", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 
       { name: "trente-et-un", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } }, 


      ], 
     height: '100%', 
     cellEdit: true, 
     cellsubmit: 'remote', 
     cellurl: "https://ort8m12c8ckf.runscope.net", 
     pager: "#pager", 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     sortname: "id_record", 
     sortorder: "asc", 
     viewrecords: true, 
     gridview: true, 
     autoencode: true, 
     caption: "My first grid", 
     ajaxGridOptions: { contentType: "application/json"}, 
     ajaxCellOptions: { contentType: "application/json"}, 
     ajaxRowOptions: { contentType: "application/json"}, 
     beforeSubmitCell : function(rowid,celname,value,iRow,iCol) { 

       selectedRowId = $('#list').jqGrid ('getGridParam', 'selrow'); 
       cellValue = $('#list').jqGrid('getCell', selectedRowId, 'id_record'); 
       v = JSON.stringify({valeur: value,nom_cellule: celname,id_record: cellValue}); 
       send(v); 
       return v; 
     }, 


     // serializeRowData: function (data) { alert("ok"); return JSON.stringify(data); }, 


    }) 
function send(datas){ 
     $.ajax({ 
      type: "POST", 
      contentType: "application/json", 
      url: 'https://ort8m12c8ckf.runscope.net', 
      data: datas, 
      dataType: "json" 
     }); 
} 
}); 
</script> 

</head> 
<body> 
    <table id="list"><tr><td></td></tr></table> 
    <div id="pager"></div> 
    <input type="button" value="send"></input> 

</body> 
</html>

所以TheCodeDestroyer给了所有的答案可能的，如果你是在相同的情况下，它可能是由于你的服务器或类似的东西。我发布了一个有关这个新问题的新主题just there。

[这是第一个问题]

我正在寻找一种方式，因为昨天JSON发送到服务器的jqGrid用。我仍然没有答案。

因此，这里是我的网格：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<title>My First Grid</title> 

<link rel="stylesheet" type="text/css" media="screen" href="./css/smoothness/jquery-ui-1.10.3.custom.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" /> 

<style> 
html, body { 
    margin: 0; 
    padding: 0; 
    font-size: 100%; 
} 
</style> 

<script src="./js/jquery-1.9.0.min.js" type="text/javascript"></script> 
<script src="./js/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="./js/jquery.jqGrid.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 


$(function() { 
    $("#list").jqGrid({   
     url:'datas.php', 
     datatype: "json", 
     mtype: "GET", 
     colNames: ["ID","Client", "Projet", "Tache", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"], 
      colModel: [ 
       { name: "id_record", width: 55, hidden:false}, 
       { name: "client", width: 55, sortable:true}, 
       { name: "projet", width: 150, align: "right", sortable:true}, 
       { name: "tache", width: 150, align: "right", sortable:true}, 
       { name: "un", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "deux", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "trois", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "quatre", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "cinq", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "six", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "sept", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "huit", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "neuf", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "dix", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "onze", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "douze", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "treize", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "quatorze", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "quinze", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "seize", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "dix-sept", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "dix-huit", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "dix-neuf", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "vingt", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "vingt-et-un", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "vingt-deux", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "vingt-trois", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "vingt-quatre", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "vingt-cinq", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "vingt-six", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "vingt-sept", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "vingt-huit", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "vingt-neuf", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "trente", width: 20, align: "right", sortable:false, editable: true, key: false }, 
       { name: "trente-et-un", width: 20, align: "right", sortable:false, editable: true, key: false}, 


      ], 
     height: '100%', 
     cellEdit: true, 
     cellsubmit: 'remote', 
     cellurl: "https://ort8m12c8ckf.runscope.net", 
     pager: "#pager", 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     sortname: "id_record", 
     sortorder: "asc", 
     viewrecords: true, 
     gridview: true, 
     autoencode: true, 
     caption: "my first grid 
     gridview: true, 

     beforeSubmitCell : function(rowid,celname,value,iRow,iCol) { 

       selectedRowId = $('#list').jqGrid ('getGridParam', 'selrow'); 
       cellValue = $('#list').jqGrid('getCell', selectedRowId, 'id_record'); 

       return {valeur:value,nom_cellule:celname,id_record:cellValue}; 
     } 

    }) 
}); 
</script> 

</head> 
<body> 

    <table id="list"><tr><td></td></tr></table> 
    <div id="pager"></div> 
</body> 
</html>

我使用内联编辑功能来发送DATAS。目前，URL指的是我可以看到发布内容的地方（并且这不是JSON我的朋友）。

您的帮助将非常感激。

来源

2013-08-27 nugetchar

你实际上使用单元格编辑不内联编辑...我没有得到你的代码为什么你设置selectedRowId和cellValue？你应该通过这个事件得到这些值。

rowid = selectedRowId 
cellValue = value

但返回JSON为此在beforeSubmitCell：

beforeSubmitCell : function(rowid,celname,value,iRow,iCol) { 

      selectedRowId = $('#list').jqGrid ('getGridParam', 'selrow'); 
      cellValue = $('#list').jqGrid('getCell', selectedRowId, 'id_record'); 

      return JSON.stringify({valeur: value,nom_cellule: celname,id_record: cellValue}); 
    }

来源

2013-08-27 09:13:20 TheCodeDestroyer

非常感谢。我粘贴了你的代码并添加了一个警告（“ok”）;对于事件serializeRowData，它永远不会出现。是否因为我使用内联编辑而不是表单编辑？ – nugetchar

我改变了答案，现在这应该适合你。 – TheCodeDestroyer

再次感谢，我以为我正在使用内联编辑。但是，它不会发送JSON，内容类型仍然是“application/x-www-form-urlencoded; charset = UTF-8”。我对JSON不是很熟悉，所以也许它是JSON，但我真的怀疑它。其实我使用runscope.com来查看请求的主体。当我打开我的账户时，我用JSON做了一个例子，主体是这样的：{“valeur”：“0.25”，“nom_cellule”：“trois”，“id_record”：“17”}但是，像“trois = + 0.5＆id = 7＆oper = edit” 所以现在的问题是：为什么我无法发送JSON格式化数据？ – nugetchar

如何使用jqGrid将JSON发送到服务器？

回答

相关问题