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

其他回答

下面是我如何使用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();
}

您可以进行AJAX调用(可能使用Prototype.js或JQuery等库)。AJAX可以处理GET和POST选项。

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

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

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