使用 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 的基本实现对我来说太冗长了，而且容易出错（如果你需要 vanilla 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
        );
}