У меня есть изображение с onclick. Когда срабатывает событие click, я хочу отправить HTTP POST и перенаправить window.location на ответ POST. Как я могу это сделать?
JavaScript: отправка POST, перенаправление на ответ
Ответ 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>
Ответ 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, Prototype, YUI, ExtJS, et al.
Кроме того, обратите внимание, что приведенное выше будет работать только в том случае, если вы отправляете сообщение в script в одном домене, иначе вы будете нарушать политика одного и того же происхождения и современные веб-браузеры откажутся отправить запрос.
Ответ 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 ответа на вашу страницу.
Ответ 4
Используя jQuery опубликуйте данные и переадресовывайте их в нужное место:
$.ajax({
type: 'POST',
url: 'receivedata.asp',
data: 'formValue=someValue',
success: function(data){
window.location = data;
}
});
Вы можете удалить data: 'formValue=someValue',
, если нет данных для перехода на страницу, которую вы хотите отправить.
Ответ 5
Вы можете использовать эту функцию, которую я сделал:
Ответ 6
Используйте изображение типа ввода.
<form action="someUrl.html" method="POST">
<input type="image" src="img.png" width="30" height="30" alt="Submit">
</form>
При нажатии на изображение вы будете перенаправлены на "someUrl.html", и сообщение будет отправлено ему