it-swarm-ko.tech

양식 제출과 같은 자바 스크립트 게시물 요청

브라우저를 다른 페이지로 연결하려고합니다. 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가 답이 아닙니다.

1358
Joseph Holsten
 /**
 * 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 paramiters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(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);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            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();
}

예:

post('/contact/', {name: 'Johnny Bravo'});

EDIT: 이것 때문에 너무 많이 upvoted, 나는 사람들이 복사 붙여 넣을 것 같아요. 그래서 부주의 한 버그를 수정하기 위해 hasOwnProperty 체크를 추가했습니다.

1948
Rakesh Pai

이것은 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();
}
114
Ryan Delucchi

@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 프레임 워크를 사용해야합니다.

64
Alexandre Victoor

document.createElement로 정상적으로 생성 된 요소에서 이 답변 에 제공된 createElement 함수를 사용하면 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);
}
51
Jonny Buchanan

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!
35
Kendall Hopkins

아니요, 양식 제출과 같은 자바 스크립트 게시 요청을 가질 수 없습니다.

당신이 가질 수있는 것은 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;
}

개인적으로 양식은 이름으로 언급되어야한다고 생각하지만 지금은 중요하지 않습니다.

27
gaby de wilde

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();
24
Head

이것은 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(); 
}
21
kritzikratzi

글쎄, 내가 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();
};
15
emragins

한 가지 해결책은 양식을 생성하여 제출하는 것입니다. 한 가지 구현은

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});
14
Joseph Holsten

세 가지 옵션이 있습니다.

  1. 표준 JavaScript 응답 : 프레임 워크를 사용하십시오! 대부분의 Ajax 프레임 워크는 XMLHTTPRequest POST를 만드는 쉬운 방법을 추상화합니다.

  2. Get 대신 open 메소드에 POST를 전달하여 XMLHTTPRequest 요청을 직접 작성하십시오. (자세한 내용은XMLHTTPRequest (Ajax).에서 POST 메서드 사용 참조).

  3. JavaScript를 통해 양식을 동적으로 작성하고, 조치를 추가하고, 입력을 추가하고, 제출하십시오.

11
Alan Storm

다음은 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();
}
10
beauburrier

나는 다른 사람들이 다음과 같이 제안 할 때 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");
9
Katy

가장 쉬운 방법은 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과 같은 브라우저로 리디렉션합니다.

6
JLavoie

Prototype library에는 ".toQueryString ()"메서드가있는 Hashtable 객체가 포함되어있어 JavaScript 객체/구조를 쉽게 쿼리 문자열 스타일 문자열로 변환 할 수 있습니다. 게시물은 요청의 "본문"이 쿼리 문자열 형식의 문자열이어야하므로 Ajax 요청이 게시물로 올바르게 작동 할 수 있습니다. Prototype을 사용한 예제는 다음과 같습니다.

$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();
};
5
Adam Ness

내 경우 완벽하게 작동합니다.

document.getElementById("form1").submit();

다음과 같은 함수에서 사용할 수 있습니다.

function formSubmit() {
     document.getElementById("frmUserList").submit();
} 

이것을 사용하여 모든 입력 값을 게시 할 수 있습니다.

3
ChintanThummar

내 솔루션은 @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"]}]}
2
cmrichards

어떤 다른 것들은 망가져있는 것처럼 보이기 때문에 (또 하나의 모든 것을 테스트하지는 않았기 때문에) 또 다른 재귀 적 솔루션입니다. 이것은 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();
}
2
mpen

DHTML을 사용하여 양식을 동적으로 추가 한 다음 제출할 수 있습니다.

1
AnthonyWJones

JQuery 및 $. post 메서드 와 같은 라이브러리를 사용할 수 있습니다.

1
Bill Turner

나는 document.forms 자바를 사용하여 양식의 모든 요소를 ​​얻은 다음 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>
1
drtechno

이것은 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();
}
1
bobef

이것은 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);
1
R. Van Hoose

FormObject 는 옵션입니다. 그러나 FormObject는 현재 대부분의 브라우저에서 지원되지 않습니다.

1
lingceng

사용자를 자동으로 게시하고 다른 페이지로 안내하는 방법은 숨겨진 양식을 작성한 다음 자동 제출하는 것입니다. 숨겨진 양식은 웹 페이지에 전혀 공간을 차지하지 않으므로 안심하십시오. 코드는 다음과 같습니다.

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

여기 내가 어떻게하는지.

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

POST 또는 GET을 사용하여 리디렉션을위한 jQuery 플러그인 :

https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js

테스트하려면 위의 .js 파일을 포함 시키거나 코드에 클래스를 복사/붙여 넣기 한 다음 여기에 코드를 사용하고 "args"를 변수 이름으로 바꾸고 "values"를 해당 변수의 값으로 대체하십시오.

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});
0
OG Sean

JQuery 트리거 메소드를 사용하여 양식을 제출할 수 있습니다. 버튼을 누르는 것처럼,

$('form').trigger('submit')

그것은 브라우저에 제출할 것입니다.

0
Canaan Etai