Question

我在jQuery中有一个表单和一个提交处理程序。

当用户提交表单时，我想在从客户端发送到服务器之前，将一些参数修改（添加）到POST请求中。

即

用户点击“提交”
我的jQuery提交手册开始执行......
我创建了一些新的键/值对并将它们添加到POST有效负载

目前看来，我唯一的选择是使用$.post()或$('form').append('<input type="hidden" name=... value=...');

感谢您的帮助。

编辑：我已经在表单中附加了一个提交处理程序;我正在尝试在用户单击提交按钮和发送到服务器的请求之间编辑post vars。

Answer 1

使用表单上的submit()函数创建回调。如果函数返回true，则表单将被提交;如果不对，表格将不会发布。

$('#theForm').submit(function() {
    $("#field1").val(newValue1);
    $("#field2").val(newValue2);
    $(this).append(newFormField);
    return true;
});

等

Answer 2

高级视图
当表单以原生方式提交时，它是浏览器执行的最后一个操作，并且它在渲染引擎/ javascript解释器的范围之外执行。

任何通过JavaScript拦截实际POST或GET请求的尝试都是不可能的，因为这种传统的Web请求仅在浏览器引擎和网络子系统之间发生。

现代解决方案：
Web开发人员使用XMLHttpRequest（一种允许JavaScript解释器访问浏览器网络子系统的Web浏览器API）提交表单数据变得越来越流行。
This is commonly referred to as Ajax

这种简单但常见的用法如下：

<html>
  <form id="myForm" onsubmit="processForm()">
   <input type="text" name="first_name"/>
   <input type="text" name="last_name"/>
   <input type="submit" value="Submit">
  </form>

  <!--Using jQuery and Ajax-->
  <script type="text/javascript">
    /**
     * Function is responsible for gathering the form input data, 
     * adding additional values to the list, and POSTing it to the
     * server via Ajax.
     */
    function processForm() {
      //Retreive the data from the form:
      var data = $('#myForm').serializeArray();

      //Add in additional data to the original form data:
      data.push(
        {name: 'age',      value: 25},
        {name: 'sex',      value: 'M'},
        {name: 'weight',   value: 200}
      );

      //Submit the form via Ajax POST request:
      $.ajax({
        type: 'POST',
        url:  'myFormProcessor.php',
        data:  data,
        dataType: 'json'
      }).done(function(data) {
        //The code below is executed asynchronously, 
        //meaning that it does not execute until the
        //Ajax request has finished, and the response has been loaded.
        //This code may, and probably will, load *after* any code that
        //that is defined outside of it.
        alert("Thanks for the submission!");
        console.log("Response Data" +data); //Log the server response to console
      });
      alert("Does this alert appear first or second?");
    }
  </script>
</html>

原生方法： 在存在XMLHttpRequest之前，一种解决方案是简单地将任何其他表单数据直接附加到文档。

使用上面发布的相同表单，jQuery append方法可能如下所示：

<html>
  <form action="myFormProcessor.php" method="POST" id="myForm" onsubmit="return processForm()">
    <input type="text" name="first_name"/>
    <input type="text" name="last_name"/>
    <input type="submit" value="Submit">
  </form>

 <script type="text/javascript">
  /**
   * Function is responsible for adding in additional POST values
   * by appending <input> nodes directly into the form.
   * @return bool - Returns true upon completion to submit the form
   */
  function processForm() {
    $('<input>').attr('type', 'hidden').attr('name', 'age').attr('value', 25).appendTo('#myForm');
    $('<input>').attr('type', 'hidden').attr('name', 'sex').attr('value', 'M').appendTo('#myForm');
    $('<input>').attr('type', 'hidden').attr('name', 'weight').attr('value', 200).appendTo('#myForm');

    return true; //Submit the form now 
    //Alternatively you can return false to NOT submit the form.
  }
 </script>
</html>

Answer 3

我认为你不能以这种方式修改POST变种。当提交处理程序运行时，没有可以添加或修改的表单数据的哈希值。我认为你是对的 - 你自己（我推荐）$ .post（）的唯一选择，或者将隐藏的输入附加到表单上（具有你不需要的DOM修改的开销）。

Answer 4

将一个submit（）处理程序附加到表单。

$('form#myForm').submit(myPostHandlingFunction);

然后从您的函数提交/发布帖子。最简单的方法是在表单中填充几个隐藏的输入，然后返回true以允许在一切看起来正确的情况下发生提交。

Answer 5

我一直在研究这个问题，我想出了一个很好的解决方案：

您可以使用Jquery .clone（）创建要提交的表单的副本。然后你可以对副本进行修改，最后提交副本。

Answer 6

您可以挂钩提交按钮的click事件并在那里进行处理。对于键/值对，您可以尝试隐藏的表单元素。

Answer 7

$("#frm").submit(function (e) {
    e.preventDefault();
    form = document.getElementById("frm"); //$("#frm")

    $.each(form.elements, function (i, el) {
        el.name = your_new_name;
        el.value = your_new_value;
        //... //el.type, el.id ...
    });

    form.submit();

    return true;
});

Answer 8

$('#myForm').submit(function() {
  $.each(this, function (i, element) {
    console.log("element name " + element.name + ", element val: " + element.value);
    if(element.name="thisThingInParticular")
      element.value = "myNewValueForThisElementInParticular";
    )

  }
});

使用jQuery在发布之前修改POST变量

8 个答案: