在提交之前添加POST参数

Question

我有一个简单的表单：

<form id="commentForm" method="POST" action="api/comment">
    <input type="text" name="name" title="Your name"/>
    <textarea  cols="40" rows="10" name="comment" title="Enter a comment">
    </textarea>
    <input type="submit" value="Post"/>
    <input type="reset" value="Reset"/>
</form>

我需要在发送到服务器之前添加两个POST参数：

var params = [
               {
                 name: "url",
                 value: window.location.pathname
               },
               {
                  name: "time",
                  value: new Date().getTime()
               }
             ];

请不要修改表单。

- dfa

---

提示一下：依赖用户提供有效的时间和网址可能会导致问题。 - merkuro

Answer 1

使用jQuery添加：

$('#commentForm').submit(function(){ //listen for submit event
    $.each(params, function(i,param){
        $('<input />').attr('type', 'hidden')
            .attr('name', param.name)
            .attr('value', param.value)
            .appendTo('#commentForm');
    });

    return true;
}); 

- Pim Jager

---

改变形式。 - Hontoni

@Hontoni 在将参数项附加到表单之前，我们可以检查表单中是否存在该参数项，这样可以确保参数项仅被附加一次。 - guogangj

你可以使用 myInput = document.createElement('input')，然后将属性设置为对象，例如：myInput.type = 'text'; myInput.name = 'name'。 - Marcelo

那是修改表单。在我看来，这是解决方案：https://dev59.com/_XNA5IYBdhLWcg3wWseK#34566506 - SamBerk

Answer 2

你可以不使用jQuery来完成这个操作：

    var form=document.getElementById('form-id');//retrieve the form as a DOM element

    var input = document.createElement('input');//prepare a new input DOM element
    input.setAttribute('name', inputName);//set the param name
    input.setAttribute('value', inputValue);//set the value
    input.setAttribute('type', inputType)//set the type, like "hidden" or other

    form.appendChild(input);//append the input to the form

    form.submit();//send with added input

- Luca C.

---

这并没有回答楼主的问题（“不修改表格”），但正是我所需要的。 - Scuzzlebutt

Answer 3

之前的答案可以被简化并且更易于阅读。

$('#commentForm').submit(function () {
    $(this).append($.map(params, function (param) {
        return   $('<input>', {
            type: 'hidden',
            name: param.name,
            value: param.value
        })
    }))
});

- sonnenhaft

Answer 4

如果你想在不修改表单的情况下添加参数，你需要序列化表单，添加你的参数，并使用 AJAX 发送：

var formData = $("#commentForm").serializeArray();
formData.push({name: "url", value: window.location.pathname});
formData.push({name: "time", value: new Date().getTime()});

$.post("api/comment", formData, function(data) {
  // request has finished, check for errors
  // and then for example redirect to another page
});

请查看.serializeArray()和$.post()文档。

- Michał Perłakowski

---

@MonneratRJ 不同意，因为用户从未指定他们想要使用ajax。我自己遇到了同样的问题，因为我不想使用ajax。 - Alex

@Alex 好的，明白了... Pim Jager 的回答符合要求... - MonneratRJ

@Alex，原帖中说他们不想修改表单。 - Michał Perłakowski

@MichałPerłakowski 是那种过于字面理解的情况之一。 - Alex

如果您想在不修改表单的情况下添加参数，我已经寻找了一段时间！ - dangel

Answer 5

您可以使用form.serializeArray()，然后在提交之前添加名称-值对：

var form = $(this).closest('form');

form = form.serializeArray();

form = form.concat([
    {name: "customer_id", value: window.username},
    {name: "post_action", value: "Update Information"}
]);

$.post('/change-user-details', form, function(d) {
    if (d.error) {
        alert("There was a problem updating your user details")
    } 
});

- Jeff Lowery

Answer 6

另一种简单而现代的方法是使用原生JavaScript来完成，而无需修改原始表单，可以使用FormData接口：

let form = document.getElementById("commentForm");
form.addEventListener("submit", event => { //add event listener
  let form = event.target;
  let formData = new FormData(form); //create the FormData from the form
  formData.set("url", window.location.pathname); //add the new parameters
  formData.set("time", new Date().getTime());
  fetch(form.action, {method: form.method, body: new URLSearchParams(formData)}); //make the actual request
  event.preventDefault(); //stop the original form from being submitted again, without the new parameters
});

注意1：在实际应用中，您可能希望检查HTTP请求是否成功。

注意2：在上面的示例中，我使用了Fetch API来发起请求。如果您不想使用它，可以使用XMLHttpRequest来发起相同的请求。

let req = new XMLHttpRequest();
req.open(form.method, form.action, true);
req.send(new URLSearchParams(formData));

注意3：在这两个例子中，我在发送之前还将FormData对象转换为URLSearchParams对象。这是因为这样发送的对象将使用application/x-www-form-urlencoded编码发送，这种编码与以“正常”方式提交表单时使用的编码相同。如果删除此步骤仍将发送表单，但编码将不同（multipart/form-data）。

- ms-afk

Answer 7

纯 JavaScript：

创建 XMLHttpRequest：

function getHTTPObject() {
    /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, 
       por lo que se puede copiar tal como esta aqui */
    var xmlhttp = false;
    /* No mas soporte para Internet Explorer
    try { // Creacion del objeto AJAX para navegadores no IE
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(nIE) {
        try { // Creacion del objet AJAX para IE
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(IE) {
            if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
                xmlhttp = new XMLHttpRequest();
        }
    }
    */
    xmlhttp = new XMLHttpRequest();
    return xmlhttp; 
}

JavaScript发送POST请求的函数：

function sendInfo() {
    var URL = "somepage.html"; //depends on you
    var Params = encodeURI("var1="+val1+"var2="+val2+"var3="+val3);
    console.log(Params);
    var ajax = getHTTPObject();     
    ajax.open("POST", URL, true); //True:Sync - False:ASync
    ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    ajax.setRequestHeader("Content-length", Params.length);
    ajax.setRequestHeader("Connection", "close");
    ajax.onreadystatechange = function() { 
        if (ajax.readyState == 4 && ajax.status == 200) {
            alert(ajax.responseText);
        } 
    }
    ajax.send(Params);
}

- Diego Fernando Villarroel Diaz

Answer 8

你可以使用ajax调用。这样，你就能通过ajax的"data:"参数自己填充POST数组。

var params = {
  url: window.location.pathname,
  time: new Date().getTime(), 
};


$.ajax({
  method: "POST",
  url: "your/script.php",
  data: params
});

- Beefjeff

---

您应该展示一个例子。您可以使用SO的嵌入式代码片段轻松实现这一点。 - Mawcel