JavaScript post 요청을 같이 제출 양식

Question

하려고 해요 직접 브라우저를 다른 페이지로 이동됩니다.원하는 경우에는 GET 요청,내가 말할 수 있습니다

document.location.href = 'http://example.com/q=a';

하지만 자원 내가 액세스하려고 하지 않을 것이 제대로 응답하지 않으면 내가 사용하는 게시물을 요청합니다.이 동적으로 생성되지 않는,내가 사용할 수 있습니다 HTML

<form action="http://example.com/" method="POST">
  <input type="hidden" name="q" value="a">
</form>

그 다음에는 그냥 양식을 제출하에서 이용하실 수 있습니다.

하지만 정말 좋아하는 JavaScript 코드를 할 수 있습 말

post_to_url('http://example.com/', {'q':'a'});

무엇 최고의 크로스 브라우저 구현?

편집

난 명확하지 않았다.저는 솔루션이 필요 변경 사항의 위치를 브라우저,다만 제출하는 양식입니다.이것이 가능 XMLHttpRequest,그것은 명백하지 않습니다.고 이야 비동기,도록 각별한 주의를 기울여 주시기 바 XML,so Ajax 는 대답하지 않습니다.

Answer 1

동적으로 만들 <input>s 에 양식 및 제출

/**
 * 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='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less wordy 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 체크를 해결하기 위해 실수로 버그가 있습니다.

Answer 2

이 버전의 선택을 사용하여 응답 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();
}

Answer 3

간단한 빠르고 더러운의 구현@론 응답:

document.body.innerHTML += '<form id="dynForm" action="http://example.com/" method="post"><input type="hidden" name="q" value="a"></form>';
document.getElementById("dynForm").submit();

물론 당신은 오히려 사용 JavaScript 프레임워크 등 Prototype 나 jQuery...

Answer 4

를 사용하는 createElement 기능에서 제공하는 이 답변, 는 데 필요한 인 IE 의 깨어짐으로 이름 특성 요소에서 만들어진 일반적으로 document.createElement:

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

Answer 5

Rakesh 파이의 응답 은 놀라운 있지만,문제에 대해 발생하는 나에게(에 사파리)하려고 하면 게시물 양식으로 필드 submit.예를 들어, 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!

Answer 6

No.할 수 없는 JavaScript post 요청을 같은 형태로 제출합니다.

당신이 무엇을 가질 수 있는 양식에서는 HTML,다음 제출 JavaScript.(으로 설명했다 많은 시간이 페이지에서).

을 만들 수 있습니다 HTML 자신이 필요하지 않 자바 스크립트를 작성합니다.는 것보다면 사람들이 제안한다.

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

개인적으로 생각 형성되어야 한여름하지만 중요하지 않다 지금이다.

Answer 7

이 있는 경우 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();

Answer 8

이슈,그러나 지원을 위한 배열(는에서 매우 일반적인 형태):

일반 자바 스크립트:

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

Answer 9

하나의 솔루션을 생성한 양식 및 제출니다.하나의 구현

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

Answer 10

잘하는 혜택에 대한 액세스의 다른 모든 게시물지 않았다,그래서 시간을 만드는 이슈 파이의 대답이다.여기에는 재귀적으로 작동할 수 있는 솔루션을 배열입니다.에 의존하지 않 jQuery.

추가되는 세그먼트를 처리하는 경우 전체 양식을 제출해야 합 같은 훌륭한 기능들을 가지고 있습니다.(ie.어디에도 없는 래퍼체의 주위에 항목의 목록)

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

Answer 11

세 가지 옵션이 여기 있습니다.

1. 표준 JavaScript 답변:프레임 워크를 사용!가장 Ajax 프레임워크가 추상화된 방법 확인 XMLHTTPRequest 게시합니다.

2. 들에게 XMLHTTPRequest 요청에 직접 전달,게시물로 열려있는 방법 대신에 얻는다.(더 많은 정보에 를 사용하시는 방법에 XMLHTTPRequest(Ajax).)

3. 자바스크립트를 통해,동적으로 생성하는 양식을 추가하는 작업을 추가,당신의 입력,그리고 제출니다.

Answer 12

나는 아래로 이동 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");

Answer 13

여기에는 얼마나 썼는데 그것을 사용하여 jQuery.테스트 Firefox and 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();
}

Answer 14

가장 쉬운 방법은 Ajax 를 사용하여 Post 요청은:

$.ajax({
    type: "POST",
    url: 'http://www.myrestserver.com/api',
    data: data,
    success: success,
    dataType: dataType
    });

위치:

• 데이터는 개체
• 데이터 형식의 데이터 예상되는 서버(xml, json,스크립트,텍스트,html)
• url 주소입니다 당신의 나머지 서버는 어떤 기능을 서버 측에서 허용하는 HTTP POST.

그런 다음에서 성공을 핸들러로 리디렉션은 브라우저와 같은 것이 창입니다.위치.

Answer 15

이 Prototype 라이브러리 포함한 Hashtable 체,함께".toQueryString()"방법을 사용하면 쉽게 설정 자바 스크립트 객체/구조로 query-string 스타일의 문자열입니다.이후 게시려면"몸"의 요청을 질의문자열 형식 문자열을 이용 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();
};

Answer 16

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

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

당신은 그것을 사용할 수 있는 함수에서 다음과 같:

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

를 사용하여 이를 게시할 수 있는 모든 값의 입력이 있습니다.

Answer 17

FormObject 는 옵션입니다.하지만 FormObject 이 지원하지 않는 대부분의 브라우저가 지금입니다.

Answer 18

아직 다른 재귀 솔루션의 일부 있기 때문에,다른 사람들이 보다 깨진(하지 않았다 테스트는 그들 모두).이에 따라 달라집 lodash3.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();
}

Answer 19

나의 솔루션을 것이다 인코딩 중첩된 개체는 달리,현재는 허용 솔루션을@RakeshPai.

사용'qs'npm 라이브러리 및 변환 기능을 변환하는 중첩된 객체로 매개 변수입니다.

이 코드는 작품으로 잘 레일 back-end 지만,당신이 할 수 있어야 그것을 수정하는 작업으로 무엇이든 백엔 필요할 수정하여 전달되는 옵션을 변환.레일 필요는 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"]
        }
      ]
    });

생산 이 레일 매개변수:

{"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"]}]}

Answer 20

이것은 같은 앨런의 옵션 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);

Answer 21

이에 따라 beauSD 의 코드를 사용하여 jQuery.그것은 향상된 그래서 작품을 재귀적으로 개체.

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

Answer 22

할 수 있는 동적으로 추가 이 양식을 사용하여 DHTML 고 다음을 제출합니다.

Answer 23

할 수 있는 라이브러리를 사용하고 다음과 같 jQuery 고 $.post 메소드.

Answer 24

내가 사용하여 문서입니다.형태로 자바와 루프를 얻기 위해 그것의 모든 요소에 양식을 통해 보내 xhttp.그래서 이것은 나의 솔루션을 위한 자바 스크립트/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>

Answer 25

나가 사용하는 방법을 게시하고 직접적인 사용이 자동으로 다른 페이지를 쓰기 숨겨진 형태와 그런 다음 자동 제출니다.는 것을 확신하 숨겨진 양식을 절대적 공간에서 웹 페이지입니다.코드은 다음과 같이 될 것이다:

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

Answer 26

여기에 어떻게 내가 그것을 하십시오.

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

Answer 27

jQuery 플러그인을 리디렉션으로 게시하거나 얻을:

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

테스트를 포함합니다.js 파일 또는 복사/붙여넣기를 클래스 코드에,다음의 코드를 사용하여 여기에서,교체를"인자"의 변수 이름,그리고"값을"값으로의 그들 각각의 변수:

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

Answer 28

수 jQuery 트리거 방법 양식을 제출하는 것처럼,당신은 버튼을 누르면 아래와 같이,

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

를 제출할 것이다.

Answer 29

을 만들 수 있습 AJAX call(성 라이브러리를 사용하여 같은 사용 Prototype.js 또 JQuery).AJAX 모두 처리할 수 있 GET 및 POST 옵션이 있습니다.