질문자 :Joseph Holsten
브라우저를 다른 페이지로 안내하려고 합니다. GET 요청을 원하면 다음과 같이 말할 수 있습니다.
document.location.href = 'http://example.com/q=a';
그러나 액세스하려는 리소스는 POST 요청을 사용하지 않는 한 제대로 응답하지 않습니다. 동적으로 생성되지 않은 경우 HTML을 사용할 수 있습니다.
<form action="http://example.com/" method="POST"> <input type="hidden" name="q" value="a"> </form>
그런 다음 DOM에서 양식을 제출합니다.
하지만 정말 저는 다음과 같이 말할 수 있는 JavaScript 코드를 원합니다.
post_to_url('http://example.com/', {'q':'a'});
최고의 크로스 브라우저 구현은 무엇입니까?
편집하다
내가 명확하지 않았다 미안 해요. 양식을 제출하는 것처럼 브라우저의 위치를 변경하는 솔루션이 필요합니다. 이것이 XMLHttpRequest 로 가능하다면 명확하지 않습니다. 그리고 이것은 비동기식이거나 XML을 사용해서는 안 되므로 Ajax는 답이 아닙니다.
<input> 동적으로 생성하고 제출하십시오.
/** * sends a request to the specified url from a form. this will change the window location. * @param {string} path the path to send the post request to * @param {object} params the parameters to add to the url * @param {string} [method=post] the method to use on the form */ function post(path, params, method='post') { // The rest of this code assumes you are not using a library. // It can be made less verbose if you use one. const form = document.createElement('form'); form.method = method; form.action = path; for (const key in params) { if (params.hasOwnProperty(key)) { const hiddenField = document.createElement('input'); hiddenField.type = 'hidden'; hiddenField.name = key; hiddenField.value = params[key]; form.appendChild(hiddenField); } } document.body.appendChild(form); form.submit(); }
예시:
post('/contact/', {name: 'Johnny Bravo'});
편집 : 이것이 너무 많은 찬성을 얻었기 때문에 사람들이 이것을 많이 복사하여 붙여 넣을 것이라고 생각합니다. 그래서 의도하지 않은 버그를 수정하기 위해 hasOwnProperty 검사를 추가했습니다.
이것은 jQuery를 사용하여 선택한 답변의 버전입니다.
// Post to the provided URL with the specified parameters. function post(path, parameters) { var form = $('<form></form>'); form.attr("method", "post"); form.attr("action", path); $.each(parameters, function(key, value) { var field = $('<input></input>'); field.attr("type", "hidden"); field.attr("name", key); field.attr("value", value); form.append(field); }); // The form needs to be a part of the document in // order for us to be able to submit it. $(document.body).append(form); form.submit(); }
@Aaron 답변의 간단한 빠르고 더러운 구현:
document.body.innerHTML += '<form id="dynForm" action="http://example.com/" method="post"><input type="hidden" name="q" value="a"></form>'; document.getElementById("dynForm").submit();
물론 Prototype 이나 jQuery 와 같은 JavaScript 프레임워크를 사용하는 것이 좋습니다.
이 답변에 createElement 함수를 사용하면 document.createElement 정상적으로 생성된 요소에 대한 name 속성 이 IE의 손상으로 인해 필요합니다.
function postToURL(url, values) { values = values || {}; var form = createElement("form", {action: url, method: "POST", style: "display: none"}); for (var property in values) { if (values.hasOwnProperty(property)) { var value = values[property]; if (value instanceof Array) { for (var i = 0, l = value.length; i < l; i++) { form.appendChild(createElement("input", {type: "hidden", name: property, value: value[i]})); } } else { form.appendChild(createElement("input", {type: "hidden", name: property, value: value})); } } } document.body.appendChild(form); form.submit(); document.body.removeChild(form); }
Rakesh Pai의 답변 submit 필드가 있는 양식을 게시하려고 할 때 Safari 에서 발생하는 문제가 있습니다. 예: post_to_url("http://google.com/",{ submit: "submit" } ); . 이 가변 공간 충돌을 우회하기 위해 함수를 약간 패치했습니다.
function post_to_url(path, params, method) { method = method || "post"; var form = document.createElement("form"); //Move the submit function to another variable //so that it doesn't get overwritten. form._submit_function_ = form.submit; form.setAttribute("method", method); form.setAttribute("action", path); for(var key in params) { var hiddenField = document.createElement("input"); hiddenField.setAttribute("type", "hidden"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", params[key]); form.appendChild(hiddenField); } document.body.appendChild(form); form._submit_function_(); //Call the renamed function. } post_to_url("http://google.com/", { submit: "submit" } ); //Works!
아니요. 양식 제출과 같은 JavaScript 게시 요청을 가질 수 없습니다.
가질 수 있는 것은 HTML의 양식이며 JavaScript로 제출할 수 있습니다. (이 페이지에서 여러 번 설명한 대로).
HTML을 직접 작성할 수 있으며 HTML을 작성하는 데 JavaScript가 필요하지 않습니다. 사람들이 그것을 제안한다면 그것은 어리석은 일입니다.
<form id="ninja" action="http://example.com/" method="POST"> <input id="donaldduck" type="hidden" name="q" value="a"> </form>
기능은 원하는 방식으로 양식을 구성합니다.
function postToURL(a,b,c){ document.getElementById("ninja").action = a; document.getElementById("donaldduck").name = b; document.getElementById("donaldduck").value = c; document.getElementById("ninja").submit(); }
그런 다음 처럼 사용하십시오.
postToURL("http://example.com/","q","a");
그러나 나는 기능을 생략하고 그냥 할 것입니다.
document.getElementById('donaldduck').value = "a"; document.getElementById("ninja").submit();
마지막으로 스타일 결정은 ccs 파일로 이동합니다.
#ninja{ display:none; }
개인적으로 양식은 이름으로 처리되어야 한다고 생각하지만 지금은 그게 중요하지 않습니다.
이것은 rakesh의 대답이지만 배열을 지원합니다(형식에서 매우 일반적임).
일반 자바 스크립트:
function post_to_url(path, params, method) { method = method || "post"; // Set method to post by default, if not specified. // The rest of this code assumes you are not using a library. // It can be made less wordy if you use one. var form = document.createElement("form"); form.setAttribute("method", method); form.setAttribute("action", path); var addField = function( key, value ){ var hiddenField = document.createElement("input"); hiddenField.setAttribute("type", "hidden"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", value ); form.appendChild(hiddenField); }; for(var key in params) { if(params.hasOwnProperty(key)) { if( params[key] instanceof Array ){ for(var i = 0; i < params[key].length; i++){ addField( key, params[key][i] ) } } else{ addField( key, params[key] ); } } } document.body.appendChild(form); form.submit(); }
아, 그리고 여기 jquery 버전이 있습니다: (코드가 약간 다르지만 결국 같은 것으로 요약됩니다)
function post_to_url(path, params, method) { method = method || "post"; // Set method to post by default, if not specified. var form = $(document.createElement( "form" )) .attr( {"method": method, "action": path} ); $.each( params, function(key,value){ $.each( value instanceof Array? value : [value], function(i,val){ $(document.createElement("input")) .attr({ "type": "hidden", "name": key, "value": val }) .appendTo( form ); }); } ); form.appendTo( document.body ).submit(); }
Prototype이 설치되어 있으면 코드를 강화하여 다음과 같이 숨겨진 양식을 생성하고 제출할 수 있습니다.
var form = new Element('form', {method: 'post', action: 'http://example.com/'}); form.insert(new Element('input', {name: 'q', value: 'a', type: 'hidden'})); $(document.body).insert(form); form.submit();
한 가지 해결책은 양식을 생성하여 제출하는 것입니다. 하나의 구현은
function post_to_url(url, params) { var form = document.createElement('form'); form.action = url; form.method = 'POST'; for (var i in params) { if (params.hasOwnProperty(i)) { var input = document.createElement('input'); input.type = 'hidden'; input.name = i; input.value = params[i]; form.appendChild(input); } } form.submit(); }
따라서 간단한 URL 단축 책갈피를 구현할 수 있습니다.
javascript:post_to_url('http://is.gd/create.php', {'URL': location.href});
글쎄, 다른 모든 게시물을 읽었더라면 Rakesh Pai의 답변에서 이것을 만드는 데 시간을 낭비하지 않았습니다. 다음은 배열 및 개체와 함께 작동하는 재귀 솔루션입니다. jQuery에 대한 종속성이 없습니다.
전체 양식이 배열처럼 제출되어야 하는 경우를 처리하기 위해 세그먼트를 추가했습니다. (즉, 항목 목록 주위에 래퍼 개체가 없는 경우)
/** * Posts javascript data to a url using form.submit(). * Note: Handles json and arrays. * @param {string} path - url where the data should be sent. * @param {string} data - data as javascript object (JSON). * @param {object} options -- optional attributes * { * {string} method: get/post/put/etc, * {string} arrayName: name to post arraylike data. Only necessary when root data object is an array. * } * @example postToUrl('/UpdateUser', {Order {Id: 1, FirstName: 'Sally'}}); */ function postToUrl(path, data, options) { if (options === undefined) { options = {}; } var method = options.method || "post"; // Set method to post by default if not specified. var form = document.createElement("form"); form.setAttribute("method", method); form.setAttribute("action", path); function constructElements(item, parentString) { for (var key in item) { if (item.hasOwnProperty(key) && item[key] != null) { if (Object.prototype.toString.call(item[key]) === '[object Array]') { for (var i = 0; i < item[key].length; i++) { constructElements(item[key][i], parentString + key + "[" + i + "]."); } } else if (Object.prototype.toString.call(item[key]) === '[object Object]') { constructElements(item[key], parentString + key + "."); } else { var hiddenField = document.createElement("input"); hiddenField.setAttribute("type", "hidden"); hiddenField.setAttribute("name", parentString + key); hiddenField.setAttribute("value", item[key]); form.appendChild(hiddenField); } } } } //if the parent 'data' object is an array we need to treat it a little differently if (Object.prototype.toString.call(data) === '[object Array]') { if (options.arrayName === undefined) console.warn("Posting array-type to url will doubtfully work without an arrayName defined in options."); //loop through each array item at the parent level for (var i = 0; i < data.length; i++) { constructElements(data[i], (options.arrayName || "") + "[" + i + "]."); } } else { //otherwise treat it normally constructElements(data, ""); } document.body.appendChild(form); form.submit(); };
다른 사람들이 다음과 같이 제안한대로 Ajax 경로를 따라갈 것입니다.
var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } // IE else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } self.xmlHttpReq.open("POST", "YourPageHere.asp", true); self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); self.xmlHttpReq.setRequestHeader("Content-length", QueryString.length); self.xmlHttpReq.send("?YourQueryString=Value");
여기에 세 가지 옵션이 있습니다.
표준 JavaScript 답변: 프레임워크를 사용하십시오! 대부분의 Ajax 프레임워크는 XMLHTTPRequest POST를 만드는 쉬운 방법을 추상화했습니다.
get 대신 open 메소드에 post를 전달하여 XMLHTTPRequest 요청을 직접 작성하십시오. (XMLHTTPRequest(Ajax)에서 POST 메서드 사용에 대한 자세한 내용)
JavaScript를 통해 동적으로 양식을 만들고, 작업을 추가하고, 입력을 추가하고 제출하십시오.
가장 쉬운 방법은 Ajax Post Request를 사용하는 것입니다.
$.ajax({ type: "POST", url: 'http://www.myrestserver.com/api', data: data, success: success, dataType: dataType });
어디:
- 데이터는 개체입니다
- dataType은 서버에서 예상하는 데이터입니다(xml, json, script, text, html).
- url은 REST 서버 또는 HTTP-POST를 수락하는 서버 측 기능의 주소입니다.
그런 다음 성공 핸들러에서 window.location과 같은 것으로 브라우저를 리디렉션합니다.
다음은 jQuery를 사용하여 작성한 방법입니다. Firefox 및 Internet Explorer에서 테스트되었습니다.
function postToUrl(url, params, newWindow) { var form = $('<form>'); form.attr('action', url); form.attr('method', 'POST'); if(newWindow){ form.attr('target', '_blank'); } var addParam = function(paramName, paramValue) { var input = $('<input type="hidden">'); input.attr({ 'id': paramName, 'name': paramName, 'value': paramValue }); form.append(input); }; // Params is an Array. if(params instanceof Array){ for(var i=0; i<params.length; i++) { addParam(i, params[i]); } } // Params is an Associative array or Object. if(params instanceof Object) { for(var key in params){ addParam(key, params[key]); } } // Submit the form, then remove it from the page form.appendTo(document.body); form.submit(); form.remove(); }
Prototype 라이브러리에는 JavaScript 개체/구조를 쿼리 문자열 스타일 문자열로 쉽게 전환할 수 있는 ".toQueryString()" 메서드가 있는 Hashtable 개체가 포함되어 있습니다. 게시물은 요청의 "본문"이 쿼리 문자열 형식의 문자열이어야 하므로 Ajax 요청이 게시물로 제대로 작동할 수 있습니다. 다음은 프로토타입을 사용하는 예입니다.
$req = new Ajax.Request("http://foo.com/bar.php",{ method: 'post', parameters: $H({ name: 'Diodeus', question: 'JavaScript posts a request like a form request', ... }).toQueryString(); };
이것은 제 경우에 완벽하게 작동합니다.
document.getElementById("form1").submit();
다음과 같은 기능에서 사용할 수 있습니다.
function formSubmit() { document.getElementById("frmUserList").submit(); }
이것을 사용하여 입력의 모든 값을 게시할 수 있습니다.
내 솔루션은 @RakeshPai에서 현재 허용되는 솔루션과 달리 깊이 중첩된 개체를 인코딩합니다.
'qs' npm 라이브러리와 stringify 함수를 사용하여 중첩된 객체를 매개변수로 변환합니다.
이 코드는 Rails 백엔드와 잘 작동하지만 stringify에 전달된 옵션을 수정하여 필요한 백엔드와 작동하도록 수정할 수 있어야 합니다. Rails에서는 arrayFormat을 "대괄호"로 설정해야 합니다.
import qs from "qs" function normalPost(url, params) { var form = document.createElement("form"); form.setAttribute("method", "POST"); form.setAttribute("action", url); const keyValues = qs .stringify(params, { arrayFormat: "brackets", encode: false }) .split("&") .map(field => field.split("=")); keyValues.forEach(field => { var key = field[0]; var value = field[1]; var hiddenField = document.createElement("input"); hiddenField.setAttribute("type", "hidden"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", value); form.appendChild(hiddenField); }); document.body.appendChild(form); form.submit(); }
예시:
normalPost("/people/new", { people: [ { name: "Chris", address: "My address", dogs: ["Jordan", "Elephant Man", "Chicken Face"], information: { age: 10, height: "3 meters" } }, { name: "Andrew", address: "Underworld", dogs: ["Doug", "Elf", "Orange"] }, { name: "Julian", address: "In a hole", dogs: ["Please", "Help"] } ] });
다음 Rails 매개변수를 생성합니다.
{"authenticity_token"=>"...", "people"=> [{"name"=>"Chris", "address"=>"My address", "dogs"=>["Jordan", "Elephant Man", "Chicken Face"], "information"=>{"age"=>"10", "height"=>"3 meters"}}, {"name"=>"Andrew", "address"=>"Underworld", "dogs"=>["Doug", "Elf", "Orange"]}, {"name"=>"Julian", "address"=>"In a hole", "dogs"=>["Please", "Help"]}]}
다른 재귀 솔루션 중 일부는 손상된 것 같습니다(모두 테스트하지는 않았습니다). 이것은 lodash 3.x 및 ES6(jQuery가 필요하지 않음)에 따라 다릅니다.
function createHiddenInput(name, value) { let input = document.createElement('input'); input.setAttribute('type','hidden'); input.setAttribute('name',name); input.setAttribute('value',value); return input; } function appendInput(form, name, value) { if(_.isArray(value)) { _.each(value, (v,i) => { appendInput(form, `${name}[${i}]`, v); }); } else if(_.isObject(value)) { _.forOwn(value, (v,p) => { appendInput(form, `${name}[${p}]`, v); }); } else { form.appendChild(createHiddenInput(name, value)); } } function postToUrl(url, data) { let form = document.createElement('form'); form.setAttribute('method', 'post'); form.setAttribute('action', url); _.forOwn(data, (value, name) => { appendInput(form, name, value); }); form.submit(); }
FormObject 는 옵션입니다. 그러나 FormObject는 현재 대부분의 브라우저에서 지원되지 않습니다.
이것은 Alan의 옵션 2(위)와 같습니다. httpobj를 인스턴스화하는 방법은 연습문제로 남겨둡니다.
httpobj.open("POST", url, true); httpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8'); httpobj.onreadystatechange=handler; httpobj.send(post);
이것은 jQuery를 사용하는 beauSD의 코드를 기반으로 합니다. 객체에 대해 재귀적으로 작동하도록 개선되었습니다.
function post(url, params, urlEncoded, newWindow) { var form = $('<form />').hide(); form.attr('action', url) .attr('method', 'POST') .attr('enctype', urlEncoded ? 'application/x-www-form-urlencoded' : 'multipart/form-data'); if(newWindow) form.attr('target', '_blank'); function addParam(name, value, parent) { var fullname = (parent.length > 0 ? (parent + '[' + name + ']') : name); if(value instanceof Object) { for(var i in value) { addParam(i, value[i], fullname); } } else $('<input type="hidden" />').attr({name: fullname, value: value}).appendTo(form); }; addParam('', params, ''); $('body').append(form); form.submit(); }
DHTML을 사용하여 양식을 동적으로 추가한 다음 제출할 수 있습니다.
jQuery 및 $.post 메소드 와 같은 라이브러리를 사용할 수 있습니다.
나는 document.forms java를 사용하고 그것을 반복하여 양식의 모든 요소를 가져온 다음 xhttp를 통해 보냅니다. 그래서 이것은 javascript / ajax 제출에 대한 내 솔루션입니다 (예로 포함 된 모든 html 포함).
<!DOCTYPE html> <html> <body> <form> First name: <input type="text" name="fname" value="Donald"><br> Last name: <input type="text" name="lname" value="Duck"><br> Addr1: <input type="text" name="add" value="123 Pond Dr"><br> City: <input type="text" name="city" value="Duckopolis"><br> </form> <button onclick="smc()">Submit</button> <script> function smc() { var http = new XMLHttpRequest(); var url = "yourphpfile.php"; var x = document.forms[0]; var xstr = ""; var ta =""; var tb =""; var i; for (i = 0; i < x.length; i++) { if (i==0){ta = x.elements[i].name+"="+ x.elements[i].value;}else{ tb = tb+"&"+ x.elements[i].name +"=" + x.elements[i].value; } } xstr = ta+tb; http.open("POST", url, true); http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.onreadystatechange = function() { if(http.readyState == 4 && http.status == 200) { // do whatever you want to with the html output response here } } http.send(xstr); } </script> </body> </html>
내가 게시하고 사용자를 자동으로 다른 페이지로 안내하는 데 사용하는 방법은 숨겨진 양식을 작성한 다음 자동 제출하는 것입니다. 숨겨진 양식은 웹 페이지에서 공간을 전혀 차지하지 않습니다. 코드는 다음과 같습니다.
<form name="form1" method="post" action="somepage.php"> <input name="fielda" type="text" id="fielda" type="hidden"> <textarea name="fieldb" id="fieldb" cols="" rows="" style="display:none"></textarea> </form> document.getElementById('fielda').value="some text for field a"; document.getElementById('fieldb').innerHTML="some text for multiline fieldb"; form1.submit();
자동 제출 적용
자동 제출의 응용 프로그램은 사용자가 자동으로 다른 페이지에 입력한 양식 값을 해당 페이지로 다시 보내는 것입니다. 이러한 응용 프로그램은 다음과 같습니다.
fieldapost=<?php echo $_post['fielda'];> if (fieldapost !="") { document.write("<form name='form1' method='post' action='previouspage.php'> <input name='fielda' type='text' id='fielda' type='hidden'> </form>"); document.getElementById('fielda').value=fieldapost; form1.submit(); }
여기 내가 하는 방법이 있습니다.
function redirectWithPost(url, data){ var form = document.createElement('form'); form.method = 'POST'; form.action = url; for(var key in data){ var input = document.createElement('input'); input.name = key; input.value = data[key]; input.type = 'hidden'; form.appendChild(input) } document.body.appendChild(form); form.submit(); }
POST 또는 GET으로 리디렉션하기 위한 jQuery 플러그인:
https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js
테스트하려면 위의 .js 파일을 포함하거나 클래스를 코드에 복사/붙여넣기한 다음 여기에서 코드를 사용하여 "args"를 변수 이름으로 바꾸고 "values"를 해당 변수의 값으로 바꿉니다.
$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});
위의 솔루션 중 어느 것도 jQuery만으로 깊은 중첩 매개변수를 처리하지 않았으므로 여기에 제 2센트 솔루션이 있습니다.
jQuery를 사용하고 깊은 중첩 매개변수를 처리해야 하는 경우 아래에서 이 함수를 사용할 수 있습니다.
/** * Original code found here: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js * I just simplified it for my own taste. */ function postForm(parameters, url) { // generally we post the form with a blank action attribute if ('undefined' === typeof url) { url = ''; } //---------------------------------------- // SOME HELPER FUNCTIONS //---------------------------------------- var getForm = function (url, values) { values = removeNulls(values); var form = $('<form>') .attr("method", 'POST') .attr("action", url); iterateValues(values, [], form, null); return form; }; var removeNulls = function (values) { var propNames = Object.getOwnPropertyNames(values); for (var i = 0; i < propNames.length; i++) { var propName = propNames[i]; if (values[propName] === null || values[propName] === undefined) { delete values[propName]; } else if (typeof values[propName] === 'object') { values[propName] = removeNulls(values[propName]); } else if (values[propName].length < 1) { delete values[propName]; } } return values; }; var iterateValues = function (values, parent, form, isArray) { var i, iterateParent = []; Object.keys(values).forEach(function (i) { if (typeof values[i] === "object") { iterateParent = parent.slice(); iterateParent.push(i); iterateValues(values[i], iterateParent, form, Array.isArray(values[i])); } else { form.append(getInput(i, values[i], parent, isArray)); } }); }; var getInput = function (name, value, parent, array) { var parentString; if (parent.length > 0) { parentString = parent[0]; var i; for (i = 1; i < parent.length; i += 1) { parentString += "[" + parent[i] + "]"; } if (array) { name = parentString + "[" + name + "]"; } else { name = parentString + "[" + name + "]"; } } return $("<input>").attr("type", "hidden") .attr("name", name) .attr("value", value); }; //---------------------------------------- // NOW THE SYNOPSIS //---------------------------------------- var generatedForm = getForm(url, parameters); $('body').append(generatedForm); generatedForm.submit(); generatedForm.remove(); }
다음은 사용 방법의 예입니다. HTML 코드:
<button id="testButton">Button</button> <script> $(document).ready(function () { $("#testButton").click(function () { postForm({ csrf_token: "abcd", rows: [ { user_id: 1, permission_group_id: 1 }, { user_id: 1, permission_group_id: 2 } ], object: { apple: { color: "red", age: "23 days", types: [ "golden", "opal", ] } }, the_null: null, // this will be dropped, like non-checked checkboxes are dropped }); }); }); </script>
테스트 버튼을 클릭하면 양식이 게시되고 POST에 다음 값이 표시됩니다.
array(3) { ["csrf_token"] => string(4) "abcd" ["rows"] => array(2) { [0] => array(2) { ["user_id"] => string(1) "1" ["permission_group_id"] => string(1) "1" } [1] => array(2) { ["user_id"] => string(1) "1" ["permission_group_id"] => string(1) "2" } } ["object"] => array(1) { ["apple"] => array(3) { ["color"] => string(3) "red" ["age"] => string(7) "23 days" ["types"] => array(2) { [0] => string(6) "golden" [1] => string(4) "opal" } } } }
참고: 현재 페이지가 아닌 다른 URL에 양식을 게시하려면 해당 URL을 postForm 함수의 두 번째 인수로 지정할 수 있습니다.
예를 들어 (귀하의 예를 다시 사용하기 위해):
postForm({'q':'a'}, 'http://example.com/');
도움이 되었기를 바랍니다.
참고 2: 코드는 리디렉션 플러그인 에서 가져왔습니다. 나는 기본적으로 내 필요에 맞게 단순화했습니다.
버튼을 누르는 것처럼 jQuery의 트리거 메서드를 사용하여 양식을 제출할 수 있습니다.
$('form').trigger('submit')
브라우저에 제출됩니다.
노력하다
function post_to_url(url, obj) { let id=`form_${+new Date()}`; document.body.innerHTML+=` <form id="${id}" action="${url}" method="POST"> ${Object.keys(obj).map(k=>` <input type="hidden" name="${k}" value="${obj[k]}"> `)} </form>` this[id].submit(); } // TEST - in second param object can have more keys function jump() { post_to_url('https://example.com/', {'q':'a'}); }
Open chrome>networks and push button: <button onclick="jump()">Send POST</button>
출처 : http:www.stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit