使用ajax函数通过onclick提交用户数据

Question

我很难理解这一点，如果电子邮件通过验证，我将尝试使用addUser函数提交用户数据。所有这些都是通过点击按钮启动的。

这是addUser函数

function addUser(username, email, callback) {
var xhr = new XMLHttpRequest();
var response;
var success = (!!Math.round(Math.random()));

if (!success){
response = JSON.stringify({
success: success,
error: "Oups, something went wrong!"
});
} else {
response = JSON.stringify({
success: success,
user: {
username: username,
email: email
}
});   
}

xhr.open("POST", "/echo/json/");
xhr.onload = function () {
if (xhr.status === 200) {
callback(JSON.parse(xhr.responseText));
}
}
xhr.send("json=" + response);
};

这是我目前所掌握的。我试过调用addUser，为ajax响应创建一个成功处理程序，输入电子邮件和用户名值。这些都没有奏效。

function validation() {
var emailRegex = /^w+[w-+.]*@w+([-.]w+)*.[a-zA-Z]{2,}$/;
var usernameInput = document.getElementById("userName").value;
var emailInput = document.getElementById("userEmail").value;
var emailError = document.getElementById('emailErr').textContent = "please enter a valid email address";
if(!emailRegex.test(emailInput)) {
emailError
}
}
function addUserClient() {
validation();
}
document.getElementById('addUserButton').addEventListener('click', addUserClient);

Answer 1

我建议您使用axios，它也可以通过CDN获得。使用它，你可以很容易地处理承诺和请求。我会给你举一个例子，因为Ajax的基本实现对我来说太冗长了，而且很容易出错(如果你需要一个普通的JS解决方案，请告诉我(。

function addUser(username, email, callback) {
// making an ajax post request with axios
axios.post("/echo/json", {
// your form fields
username,
email
})
.then(res => {
// response from server can be found in res
})
.catch(err => {
// handle any errors here
);
}