7

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

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

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

4

4 回答 4

5

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

于 2012-08-21T13:05:46.507 回答
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。

于 2012-08-21T13:08:00.787 回答
0

如果您阅读 jQuery 文档中的信息，您会注意到$.post()有一个 Data 选项。

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

例子 ：

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

您可以使用通常的$("form").serialize().

于 2012-08-21T13:06:29.697 回答
0

要进行实际的 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
                });
于 2012-08-21T13:10:42.193 回答