我正在尝试将浏览器指向另一个页面。如果我想要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'});

最好的跨浏览器实现是什么?

我需要一个改变浏览器位置的解决方案,就像提交表单一样。这不应该是异步的,也不应该使用XML,因此Ajax不是答案。


当前回答

我使用document.forms并循环它以获取表单中的所有元素,然后通过XMLHttpRequest发送。这是我的javascript/ajax提交解决方案(以所有HTML为例):

函数smc(){var http=new XMLHttpRequest();var url=“yourphpfile.php”;var x=document.forms[0];var xstr=“”;变量i;对于(i=0;i<x.length;i++){如果(i==0){xstr+=x.elements[i].name+“=”+x.elements[i].value;}其他{xstr+=“&”+x.elements[i].name+“=”+x.element[i].value;}}http.open(“POST”,url,true);http.setRequestHeader(“内容类型”,“application/x-www-form-urlencoded”);http.onreadystatechange=函数(){如果(http.readyState==4&&http.status==200){//在这里使用html输出响应执行任何操作}}http.send(xstr);}<!DOCTYPE html><html><body><表单>名字:<input-type=“text”name=“fname”value=“Donald”><br>姓氏:<input-type=“text”name=“lname”value=“Duck”><br>地址1:<input-type=“text”name=“add”value=”123 Pond Dr“><br>城市:<input type=“text“name=”City“value=”Duckopolis“><br></form><button onclick=“smc()”>提交</button></body></html>

其他回答

在表单中动态创建<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 parameters 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 verbose 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或GET重定向:

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

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

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

最简单的方法是使用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的内容重定向浏览器。

这里有三个选项。

标准JavaScript回答:使用框架!大多数Ajax框架都会抽象出一种简单的XMLHTTPRequest POST方法。自己生成XMLHTTPRequest请求,将post传递到open方法而不是get。(有关在XMLHTTPRequest(Ajax)中使用POST方法的更多信息。)通过JavaScript,动态创建表单,添加动作,添加输入,然后提交。

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