XMLHttpRequest для публикации формы HTML
Текущая настройка
У меня есть форма HTML, как это.
<form id="demo-form" action="POST" method="post-handler.php">
<input type="text" name="name" value="previousValue"/>
<button type="submit" name="action" value="dosomething">Update</button>
</form>
У меня может быть много таких форм на странице.
Мой вопрос
Как я могу отправить эту форму асинхронно и не перенаправить или обновить страницу? Я умею пользоватьсяXMLHttpRequest
, У меня есть проблема получения данных из HTML в javascript, чтобы затем поместить в строку запроса поста. Вот метод, который я сейчас использую для моих zXMLHttpRequest`ов.
function getHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function demoRequest() {
var request = getHttpRequest();
request.onreadystatechange=function() {
if (request.readyState == 4 && request.status == 200) {
console.log("Response Received");
}
}
request.open("POST","post-handler.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("action=dosomething");
}
Так, например, скажем, метод JavaScriptdemoRequest()
был вызван при нажатии кнопки отправки формы, как я могу получить доступ к значениям формы из этого метода, чтобы затем добавить его вXMLHttpRequest
?
РЕДАКТИРОВАТЬ
Пытаясь реализовать решение из ответа ниже, я изменил свою форму следующим образом.
<form id="demo-form">
<input type="text" name="name" value="previousValue"/>
<button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button>
</form>
Тем не менее, при нажатии на кнопку, он все еще пытается перенаправить меня (туда, где я не уверен), и мой метод не вызывается?
Слушатель событий кнопки
document.getElementById('updateBtn').addEventListener('click', function (evt) {
evt.preventDefault();
// Do something
updateProperties();
return false;
});