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