XMLHttpRequest para postar formulário HTML
Configuração atual
Eu tenho um formulário HTML assim.
<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>
Eu posso ter muitos desses formulários em uma página.
Minha pergunta
Como faço para enviar este formulário de forma assíncrona e não ser redirecionado ou atualizar a página? Eu sei usarXMLHttpRequest
. O problema que tenho é recuperar os dados do HTML em javascript para, em seguida, colocar em uma seqüência de solicitação de postagem. Aqui está o método que estou usando atualmente para o meu 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");
}
Por exemplo, digamos o método javascriptdemoRequest()
foi chamado quando o botão de envio do formulário foi clicado, como eu acesso os valores do formulário desse método para adicioná-lo aoXMLHttpRequest
?
EDITAR
Tentando implementar uma solução a partir de uma resposta abaixo, modifiquei meu formulário dessa forma.
<form id="demo-form">
<input type="text" name="name" value="previousValue"/>
<button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button>
</form>
No entanto, ao clicar no botão, ele ainda está tentando me redirecionar (para onde eu não tenho certeza) e meu método não é chamado?
Ouvinte de evento de botão
document.getElementById('updateBtn').addEventListener('click', function (evt) {
evt.preventDefault();
// Do something
updateProperties();
return false;
});