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

【问题标题】：How to send JSON to server with jqGrid?如何使用 jqGrid 将 JSON 发送到服务器？
【发布时间】：2013-08-27 08:28:32
【问题描述】：

[编辑]（我等不及 3 小时来回答我的问题）：好吧，看来不是 jqGrid 组件出了问题，感谢 TheCodeDestroyer 解决了这个问题。

我测试了这段代码：

<!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。

[这是第一个问题]

从昨天开始，我正在寻找一种使用 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, 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>

我正在使用内联编辑功能来发送数据。目前，该 URL 指的是一个我可以看到发布内容的地方（我的朋友不是 JSON）。

非常感谢您的帮助。

【问题讨论】：

标签： javascript jquery json post jqgrid

【解决方案1】：

您实际上使用的是单元格编辑而不是内联编辑...我不明白您的代码为什么要设置 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});
    }

【讨论】：

非常感谢。我粘贴了你的代码并添加了一个 alert("ok");对于事件 serializeRowData，它永远不会出现。是不是因为我使用内联编辑而不是表单编辑？
再次感谢，我以为我在使用内联编辑。但同样，它不发送 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 格式的数据？
嗯，基本上你是在发送 JSON，但你的应用程序将它格式化为 x-www-form-urlencoded，所以这与你的应用程序有关，而不是 jqGrid 组件。您也可以尝试添加这些网格选项：{ajaxGridOptions: { contentType: "application/json" }, {ajaxCellOptions: { contentType: "application/json", type: "PUT" },
仍然无法正常工作：/ 我的应用程序只是“index.html”文件，其中包含网格和 datas.php，即数据提供者。现在，我请求的结果没有正文，这很奇怪。
顺便说一句，您在哪里查看浏览器中的内容？