JavaScript: отправка POST, перенаправление на ответ

Question

У меня есть изображение с кликом. Когда срабатывает событие click, я хочу отправить HTTP POST и перенаправить window.location на ответ на POST. Как я могу это сделать?

Answer 1

Просто привяжите кнопку к методу отправки элемента формы, и перенаправление произойдет естественным образом.

<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 и перенаправляет браузер на URL-адрес, полученный из HTTP-ответа. Вы должны быть в состоянии использовать 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 , Прототип , YUI , ExtJS и др.

Кроме того, обратите внимание, что вышеприведенное будет работать только в том случае, если вы публикуете скрипт, размещенный в том же домене, в противном случае вы нарушите политику одного происхождения , и современные веб-браузеры откажутся отправьте запрос.

Answer 3

Вместо window.location = http.responseText используйте следующее:

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

document.open() очищает текущее содержимое страницы, а document.write() вставляет HTML-код ответа на вашу страницу.

Answer 4

Вы можете использовать эту функцию, которую я сделал:

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

Answer 5

Использование jQuery опубликовать данные и перенаправить в нужное место, например:

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

Вы можете удалить data: 'formValue=someValue',, если нет данных для передачи на страницу, которую вы хотите опубликовать.

Answer 6

Использовать входной тип изображения.

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

При нажатии на изображение вы будете перенаправлены на "someUrl.html" и на него будет отправлено сообщение