제출 전 POST 매개변수 추가

제출 전 POST 매개변수 추가

간단한 양식이 있습니다.

<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()
               }
             ];

양식을 수정하지 말고 부탁드립니다.

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;
}); 

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

이전 답변은 단축할 수 있고, 더 쉽게 읽을 수 있습니다.

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

양식을 수정하지 않고 매개 변수를 추가하려면 양식을 직렬화하고 매개 변수를 추가한 다음 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
});

참조 및 문서화.

폼을 할 수 있습니다. serialize.배열()을 한 다음 게시하기 전에 이름-값 쌍을 추가합니다.

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")
    } 
});

바닐라 자바스크립트를 사용하여 원래 형태를 수정하지 않고 간단하게 할 수 있는 또 다른 방법은 인터페이스를 사용하는 것입니다.

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: 위의 예에서는 를 사용하여 요청을 했습니다.사용하지 않으려면 를 사용하여 동일한 요청을 하는 방법입니다.

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

참고 3: 두 예제 모두에서 FormData 개체를 전송하기 전에 개체로 변환했습니다.이것은 이렇게 하면 객체가 사용하여 전송되기 때문입니다.application/x-www-form-urlencoded인코딩. 양식이 "일반" 방식으로 제출된 경우 기본적으로 사용되었을 것과 동일한 인코딩입니다.이 단계를 제거하면 양식이 계속 전송되지만 인코딩이 다릅니다. (multipart/form-data).

PURE 자바스크립트:

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; 
}

정보를 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);
}

아약스 콜을 할 수 있습니다.

그러면 ajax 'data:' 매개변수를 통해 POST 배열을 직접 채울 수 있습니다.

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


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

언급URL : https://stackoverflow.com/questions/993834/adding-post-parameters-before-submit