I did a similar post to this called Vanilla JavaScript Login form POST handler using fetch. Fetch returns a JavaScript Promise, which can be a bit of a pain so I've also done a version using XHR, see below:
var postJSON = function(url, method, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send(data);
};
Here's how to call it:
const form = document.querySelector('form');
form.addEventListener('submit', function(ev) {
ev.preventDefault();
const url = this.getAttribute('action');
const method = this.getAttribute('method');
postJSON(url, method, new FormData(form), function(error, json) {
if (error !== null) {
console.log('parsing failed', error);
} else {
console.log('json.username', json.username);
console.log('json.password', json.password);
}
});
});
No comments:
Post a Comment