JavaScript提交請求,如表單提交


Answers

這將是使用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();
}
Question

我正在嘗試將瀏覽器指向其他頁面。 如果我想要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不是答案。




最簡單的方法是使用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。




又一個遞歸解決方案,因為其他一些似乎被破壞了(我沒有測試所有這些)。 這一個取決於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();
}



這是rakesh的答案,但支持數組(這在表單中很常見):

純javascript:

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



這是我用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();
}



使用此答案中提供的createElement函數,這是由於IE的破壞與通常使用document.createElement創建的元素上的name屬性所必需的:

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



不,你無法像提交表單一樣提供JavaScript發布請求。

您可以擁有的是HTML中的表單,然後使用JavaScript進行提交。 (如本頁多次解釋)

你可以自己創建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;
}

就我個人而言,我認為形式應該以名稱來解決,但現在並不重要。




您可以使用DHTML動態添加表單,然後提交。




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

它適用於我的情況。

你也可以在功能上使用它,

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

使用這個你可以發布所有的輸入值。




這就像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);



你可以做一個AJAX調用(可能使用庫,比如使用Prototype.js或JQuery)。 AJAX可以處理GET和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>



一種解決方案是生成表單並提交。 一個實現是

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



Related