[removed] Sending POST, redirecting to response

问题:

I have an image with an onclick. When the click event fires, I want to send an HTTP POST and have the window.location redirect to the response to the POST. How can I do that?

回答1:

Just bind the button to the submit method of a form element, and the redirect will happen naturally.

<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>

回答2:

Assuming you require to send the POST request asynchronously, you may want to check the example below to get you going in the right direction:

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

Then you require a JavaScript function that submits an asynchronous HTTP POST request and redirects the browser to a URL received from the HTTP response. You should be able to use XMLHttpRequest for such an asynchronous call, as in the following example:

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

Note that for a truly cross-browser XMLHttpRequest call, you may want to use a standard-compliant cross-browser XMLHttpRequest implementation like XMLHttpRequest.js, unless you are using some JavaScript framework like jQuery, Prototype, YUI, ExtJS, et al.

In addition, also note that the above will only work if you are posting to a script hosted within the same domain, otherwise you will be violating the same-origin policy and modern web browsers will refuse to send the request.

回答3:

Instead of window.location = http.responseText use the following:

http.onreadystatechange = function() {
  if (http.readyState == 4 && http.status == 200) {
    document.open();
    document.write(http.responseText);
  }
}

document.open() clears the current content of the page and document.write() inserts the response html code into your page.

回答4:

Using jQuery post the data and redirect to your desired location like so:

$.ajax({
  type: 'POST',
  url: 'receivedata.asp',
  data: 'formValue=someValue',
  success: function(data){
      window.location = data;
  }
});

You could remove the data: 'formValue=someValue', if there is no data to pass to the page you want to post to.

回答5:

You could use this function i made:

http://jsfiddle.net/cgarciagl/KU4B6/

回答6:

Use a input type image.

<form action="someUrl.html" method="POST">
    <input type="image" src="img.png" width="30" height="30" alt="Submit">
</form>

When clicking on the image you will be redirected to "someUrl.html" and a post will be sent to it