Question

我有一个正确提交的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我的功能：

$.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 type="hidden" name="'+key+'" />')
      $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

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

数据：随请求一起发送到服务器的地图或字符串。

示例：

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

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

Answer 4

要执行实际的Ajax帖子，您可以使用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
                });

将JSON数据附加到POST请求

4 个答案: