[javascript] 양식 제출과 같은 JavaScript 게시물 요청

JAVASCRIPT / 글쓴이

브라우저를 다른 페이지로 보내려고합니다. 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>양식에서 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부주의 한 버그를 수정하기 위해 수표를 추가했습니다 .

답변

이것은 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 제공된 함수를 사용하면 다음 과 같이 정상적으로 작성된 요소 의 name 속성 이 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);
}

답변

Rakesh Pai의 답변 은 훌륭하지만 ( Safari에서 )라는 필드가있는 양식을 게시하려고 할 때 발생하는 문제가 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!

답변

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

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

개인적으로 양식은 이름으로 처리해야한다고 생각하지만 지금은 중요하지 않습니다.

답변

당신이있는 경우 프로토 타입 설치, 당신은 생성과 같은 숨겨진 양식을 제출 코드를 조여 수 있습니다 :

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