下面简单封装了一个类似jquery的ajax工具
(function(global){
let kevin = {};
kevin.ajax = function(type, url, data, headers, callback){
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(Math.floor(xhr.status / 100) == 2 && xhr.readyState == 4){
callback(xhr.responseText);
}
};
xhr.open(type, url, true);
headers.forEach((header) => {
xhr.setRequestHeader(header.key, header.value);
});
xhr.send(JSON.stringify(data));
};
global.$ = kevin;
})(window);
然后我们通过我们封装好的ajax工具进行表单的提交。
首先进行表单的校验,如果校验失败,渲染失败信息。如果校验成功,利用ajax将数据提交到json-server(json-server主要的作用是搭建一台JSON服务器,测试一些业务逻辑),然后将添加的数据渲染到界面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="util.js"></script>
</head>
<body>
<form id="registerFrom">
name: <input type="text" name="name"><span class="tip"></span><br>
age: <input type="text" name="age"><span class="tip"></span><br>
email: <input type="text" name="email"><span class="tip"></span><br>
<input type="submit" value="submit">
</form>
<div id="user">
</div>
<script>
window.onload = function () {
(function () {
let nameR = /^\w{3,6}$/;
let ageR = /^[1-9]\d?$/;
let emailR = /^\w+@\w+(\.\w+)+$/;
let errors = new Map();
let url = "http://localhost:3000/users";
let type = "POST";
let headers = [{key :"Content-Type", value:'application/json'}];
function validate(user) {
errors.clear();
if(!nameR.test(user.name)){
errors.set("name","name is error");
}
if(!ageR.test(user.age)){
errors.set("age","age is error");
}
if(!emailR.test(user.email)){
errors.set("email","email is error");
}
}
function renderErrors(form) {
let nameSpane = form[0].nextElementSibling;
let ageSpane = form[1].nextElementSibling;
let emailSpane = form[2].nextElementSibling;
let nameError = errors.get('name') ? errors.get('name') : "";
let ageError = errors.get('age') ? errors.get('age') : "";
let emailError = errors.get('email') ? errors.get('email') : "";
nameSpane.textContent = nameError;
ageSpane.textContent = ageError;
emailSpane.textContent = emailError;
}
function renderUser(user) {
let userDiv = document.querySelector("#user");
userDiv.textContent = user.id + "," + user.name + "," + user.age + "," + user.email;
}
function send(user) {
$.ajax(type,url,user,headers,function(txt){
renderUser(JSON.parse(txt));//渲染
});
}
document.querySelector("#registerFrom").addEventListener('submit',(e) =>{
let name = document.querySelector("input[name=name]").value;
let age = document.querySelector("input[name=age]").value;
let email = document.querySelector("input[name=email]").value;
let user = {name:name, age:age, email:email};
validate(user);
if(!errors.size){
send(user);
e.preventDefault();//阻止表单提交
}else{
renderErrors(document.querySelector("#registerFrom"));
e.preventDefault();//阻止表单提交
}
});
})();
}
</script>
</body>
</html>