JavaScript发布请求,例如表单提交


1529

我正在尝试将浏览器定向到其他页面。如果我想要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并不是答案。


1
如另一个线程中所述,有一个可与POST或GET方法一起使用的jquery“ .redirect”插件。它创建带有隐藏输入的表单,并为您提交。例如:$ .redirect('demo.php',{'arg1':'value1','arg2':'value2'}); github.com/mgalante/jquery.redirect/blob/master/...
OG肖恩

Answers:


2143

动态创建<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 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检查以修复所有无意的错误。


10
数据参数中的数组呢?jQuery post()解释为:“ data:{array:[1,2,3]}”为?array = 1&array = 2&array = 3。Whis代码给出了另一个结果。
2015年

18
警告:尽管有很多支持,但此解决方案是有限的,并且不能处理表单中的数组或嵌套对象。否则,这是一个很好的答案。
Emragins

3
令人惊讶的是html或javascript不是jquery都没有本机支持。您必须对此进行编码。
尤金2016年

14
@mricci此代码段的目的是将浏览器重定向到该操作指定的新URL。如果您停留在同一页面上,则可以使用传统的AJAX来发布数据。由于浏览器应该导航到新页面,因此当前页面的DOM内容将无关紧要
Ken Bellows 2016年

6
如果从零开始创建表单,Python,Django和可能的Flask用户将看到以下错误:“禁止(403)。CSRF验证失败。请求中止。”。在这种情况下,您必须以这种方式传递csrf令牌:post('/ contact /',{name:'Johnny Bravo',csrfmiddlewaretoken:$(“#csrf_token”)。val()});
Davidson Lima

129

这将是使用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();
}

2
固定:现在追加到document.body
Ryan Delucchi 2011年

7
稍加修改以支持数组和对象gist.github.com/hom3chuk/692bf12fe7dac2486212
–НЛО15

3
如果value包含dangeours xml字符,则在ASP.NET中将不起作用。然后,在服务器端也需要UrlDecode。
Stefan Steiger

如果您的需求很简单,则不需要此功能。这种$("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit();
单线

71

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

当然,您应该使用PrototypejQuery之类的JavaScript框架...


6
有没有办法在当前浏览器窗口/选项卡中没有加载网页的情况下执行此操作?
pbreitenbach

54

使用此答案中createElement提供的功能,由于IE的损坏(通常使用以下方法创建的元素上具有name属性),这是必需的: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);
}

6
提交后是否需要删除孩子?页面仍然消失吗?
2012年

2
提交后没有任何必要删除子对象,除非使用了会话并保存了这些数据。
米洛什

6
@CantucciHQ即使未设置表单目标,页面也可能保持不变。例如,有204个无内容
Eugene Ryabtsev 2014年

38

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!

7
2018年还是一个更好的答案?
iiirxs

30

不能。您不能像表单提交一样具有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;
}

我个人认为表单应该以名称解决,但是现在不重要。


26

如果已安装原型,则可以收紧代码以生成并提交隐藏的表单,如下所示:

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

25

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

3
ps:我现在喜欢使用该功能,但无需在最后提交表单,而只是将其返回给调用者。这样,如果需要,我可以轻松设置其他属性或使用其他属性。
kritzikratzi 2012年

3
大!很有用。对于依赖这种形式的服务器端PHP的人来说,这是一个小小的改变,我将addField(key,params [key] [i])更改为addField(key +'[]',params [key] [i])。这使得$ _POST [key]可以作为数组使用。
Thava

2
@Thava您还可以在输入字段上设置name =“ bla []”。无论如何,除了php之外,还有其他语言不支持[]语法,因此我将其保持不变。
kritzikratzi

17

一种解决方案是生成表格并提交。一种实现是

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

16

好吧,希望我已经阅读了所有其他文章,以便我不会浪费时间从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();
};

1
这似乎也不能正确编码嵌套对象。
mpen

1
@mpen你有小提琴吗?
2015年

1
不,对不起 写我自己很容易。不值得花时间调试。
mpen

12

这里有三个选择。

  1. 标准JavaScript答案:使用框架!大多数Ajax框架都会使您抽象出进行XMLHTTPRequest POST 的简便方法。

  2. 自己发出XMLHTTPRequest请求,将post传递到open方法而不是get中。(有关更多信息,请参见在XMLHTTPRequest(Ajax)使用POST方法。)

  3. 通过JavaScript动态创建表单,添加操作,添加输入并提交。


5
XMLHTTPRequest不会更新窗口。您是否要说我应该以document.write(http.responseText)结尾的AJAX?
Joseph Holsten

11
如果他不愿意在框架上做任何其他事情,为什么还要增加30k +?
Dementic

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

1
未捕获的ReferenceError:未定义QueryString。
Chase Roberts

11

最简单的方法是使用Ajax Post Request:

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

哪里:

  • 数据是一个对象
  • dataType是服务器期望的数据(xml,json,脚本,文本,html)
  • url是RESt服务器的地址或服务器端接受HTTP-POST的任何功能。

然后在成功处理程序中,使用window.location之类的内容重定向浏览器。


5
您没有提到您提供的方法基于jQuery JavaScript库。
DavidRR

8
您还错过了问题的重点-他想“将浏览器定向到其他页面”,而不是发出Ajax请求。
黑色

您可以等待回复,然后等待document.location = {url};。我能想象的唯一不可行的地方是如果您重定向到文件下载。
Epirocks

11

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

1
为我工作。谢谢。(已在Chrome中测试)
dannie.f 2010年

2
我认为这里的问题可能是在提交提交之前删除了表单。我听说在某些浏览器中,如果您在提交完成之前移动或删除表单,则处理程序将不会触发。而是从处理程序中的文档中删除该表单。
Jeff DQ

奇迹般有效。经过Firefox + Chrome + IE11的测试-非常感谢!
Deunz

6

所述原型库包括一个Hashtable对象,具有“.toQueryString()”的方法,它允许你很容易地把一个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();
};

1
该解决方案是不通过返回服务器答案来替换当前显示的文档的少数解决方案之一。
dothebart

4

在我的情况下,这非常有效:

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

您可以在类似的函数中使用它:

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

使用此功能,您可以发布所有输入值。


3

另一个递归解决方案,因为其他一些似乎已被破坏(我没有测试全部)。这取决于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();
}

3

我的解决方案将对深层嵌套的对象进行编码,这与@RakeshPai当前接受的解决方案不同。

它使用“ qs” npm库及其stringify函数将嵌套对象转换为参数。

尽管您应该能够通过修改传递给stringify的选项来修改它以使其与所需的任何后端一起工作,但是该代码与Rails后端可以很好地协同工作。Rails要求将arrayFormat设置为“ brackets”。

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


1

这就像艾伦的选项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

这是基于使用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

我使用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>

1

您可以使用jQuery的Trigger方法来提交表单,就像按下按钮一样,

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

它将在浏览器中提交。


0

我用来自动将用户发布并定向到另一个页面的方法是只写一个隐藏的表单,然后自动提交它。请确保隐藏的表单绝对不会占用网页上的任何空间。该代码将是这样的:

    <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

这是我的方法。

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

以上所有解决方案都无法仅使用jQuery处理深层嵌套参数,因此这是我的两分钱解决方案。

如果您使用的是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:代码取自redirect插件。我基本上只是根据自己的需要对其进行了简化。


-1

jQuery插件,用于通过POST或GET重定向:

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

要进行测试,请包含上述.js文件或将类复制/粘贴到您的代码中,然后在此处使用代码,将“ args”替换为变量名,将“ values”替换为相应变量的值:

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


对于我们来说,该解决方案仍然运行良好,如果您不赞成它,请留下评论。
OG肖恩

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.