JavaScript:发送POST,重定向到响应

Question

我有一个带有onclick的图像.当click事件触发时,我想发送一个HTTP POST并让window.location重定向到POST的响应.我怎样才能做到这一点？

Answer 1

只需将按钮绑定到表单元素的submit方法,重定向就会自然发生.

<script type='text/javascript'>
 function form_send(){
   f=document.getElementById('the_form');
   if(f){
     f.submit();
     }
   }
 </script>

<form method='post' action='your_post_url.html' id='the_form'>
  <input type='hidden' value='whatever'>
</form>

<span id='subm' onclick='form_send()'>Submit</span>

Answer 2

假设您需要异步发送POST请求,您可能需要检查下面的示例以使您朝着正确的方向前进:

<img src="my_image.png" onClick="postOnClick();">

然后,您需要一个JavaScript函数,该函数提交异步HTTP POST请求并将浏览器重定向到从HTTP响应接收的URL.您应该可以使用XMLHttpRequest这种异步调用,如下例所示:

function postOnClick()
{
    var http = new XMLHttpRequest();

    var params = "arg1=value1&arg2=value2";

    http.open("POST", "post_data.php", true);

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");

    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
            window.location = http.responseText;
        }
    }

    http.send(params);
}

请注意,对于真正的跨浏览器XMLHttpRequest调用,您可能希望使用符合标准的跨浏览器XMLHttpRequest实现,如XMLHttpRequest.js,除非您使用的是一些JavaScript框架,如jQuery,Prototype,YUI,ExtJS等.

此外,还要注意上述内容仅在您发布到同一域中托管的脚本时才有效,否则您将违反同源策略,现代Web浏览器将拒绝发送请求.