当填写完表单数据的时候，点击提交按钮之后，会进行页面跳转，如果填写正确还好，但是一旦填写失败，就不得不重新书写
所以，为了更好的优化可以使用ajax发送请求, 填写完表单数据的时候，点击提交按钮之后，我们可以自定义要跳转的页面，如果失败，也只是停留在当前页面中
但是使用ajax发送表单数据也是有缺点，如果表单中的数据结构比较复杂，这样的话，我们书写起来比较麻烦，需要手工去拼写所有的数据，并且与页面结构是强耦合，所以我们要使用表单序列化
使用方式：$(form).serialize()
该方法获取指定的form表单中的所有数据
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/web/css/style.css">
</head>
<body>
<!-- <div class="form"> -->
<form>
<p>
<label for="">用户名</label>
<input type="text" name="username" id="username" value="hello">
</p>
<p>
<label for="">密码</label>
<input type="text" name="password" id="password" value="123">
</p>
<p>
<label for="">介绍</label>
<textarea name="intro" id="" cols="40" rows="3">hello</textarea>
</p>
<p>
<label for="">爱好</label>
<label for="c1" class="item-title">篮球<input type="checkbox" name="intrest" value="basketball" id="c1"></label>
<label for="c2" class="item-title">足球<input type="checkbox" name="intrest" value="football" id="c2"></label>
<label for="c3" class="item-title">乒乓球<input type="checkbox" name="intrest" value="pingpang" id="c3"></label>
</p>
<p class="btns">
<button>注册</button>
</p>
</form>
<!-- </div> -->
<h1 id="result"></h1>
</body>
<script src="../js/jquery.js"></script>
<script>
$('button').click(function() {
let data = $('form').serialize();
console.log(data)
$.get('/regist', data).success(res => console.log(res))
return false;
})
</script>
</html>
实现serialize方法
当我们在serialize方法中传递表单对象就可以获取表单提交的数据
function serialize(form) { // 结果字符串 let str = ''; // from遍历类数组对象 Array.from(form.elements, function(item) { // 有name属性才能提交 if (item.name) { // 判断是否是选框 if (item.type === 'checkbox' || item.type === 'radio') { // 判断其是否被选中 if (item.checked) { // 存储数据 str += '&' + item.name + '=' + item.value; } } else { // 存储数据 str += '&' + item.name + '=' + item.value; } } }) // 返回它们的值 return str.slice(1); }
注： form.elements 获取表单内部所有的表单控件 (不包括内部添加的p标签，div等，只能获取表单控件)
源生js中获取表单： document.forms