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

Question

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

Answer 1

Предполагая, что вы требуете, чтобы отправить запрос 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, Prototype, YUI, ExtJS, et al.

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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

Answer 5

Вместо 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 6

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

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