将JSON数据附加到POST请求

我有一个正确提交的AJAX表单，它将完整的模型发送到控制器。 我想要的是添加一个与请求一起发送的JSON。 我设法拦截POST这样：

$(document).ready(function() { $("form").submit(function(e) { if (e.originalEvent.explicitOriginalTarget.id == "submit") { } }); 

我不知道的是如何发送我的JSON数据，同时保持最初在表单提交上发送的数据。 我想到了添加一个隐藏字段，将其值设置为JSON字符串，然后在服务器上反序列化，但这似乎是错误的。

Answer 1

如果您不能使用AJAX，则必须使用隐藏字段将JSON数据存储在表单中。 否则，您的JSON永远不会被发送到服务器。 HTML规范明确规定了规则：只有在提交此表单时，表单内输入字段中包含的值才会发送到服务器。

Answer 2

随意使用jQuery我的function：

 $.fn.addHiddenInputData = function(data) { var keys = {}; var addData = function(data, prefix) { for(var key in data) { var value = data[key]; if(!prefix) { var nprefix = key; }else{ var nprefix = prefix + '['+key+']'; } if(typeof(value) == 'object') { addData(value, nprefix); continue; } keys[nprefix] = value; } } addData(data); var $form = $(this); for(var k in keys) { $form.addHiddenInput(k, keys[k]); } } $.fn.addHiddenInput = function(key, value) { var $input = $('') $input.val(value); $(this).append($input); } 

用法：

 // click event is fired before submit event $('#form input[type="submit"]').click(function(){ // add some JSON data before submit $('#form').addHiddenInputData({ 'foo': 123, 'bar': 456, 'foo2': { 'bar': 123 } }); }); 

无需使用ajax。

Answer 3

要执行实际的Ajaxpost，您可以使用JQuery.Ajax （有更多选项）或JQuery.Post

对于数据，您可以使用$("form").serialize()来获取所有表单的数据。 然后，您可以手动添加其他数据，例如var data = $("form").serialize() + ",other=data" 。 如果你想添加大量数据，这可能会变得混乱。 更简单的选择是在表单中添加隐藏字段，当您调用serialize()时它们将包含在数据中

示例： – 这将发布所有数据，包括包含额外数据的隐藏字段。

 $.post('www.magicurl.com/api', $("form").serialize(), function (data) { //process data from server }); 

Answer 4

如果您从jQuery文档中读取信息，您会注意到$ .post（）有一个Data选项。

• data ：随请求一起发送到服务器的映射或字符串。

示例：

 $.post("test.php", { name: "AdrianMar" } ); 

您可以使用通常的$("form").serialize()获取表单值$("form").serialize() 。