异步提交表单
异步提交表单的步骤
所谓异步提交表单，就是不再使用表单的提交按钮实现表单的提交功能，而是通过Ajax异步交互方式实现表单提交。具体实现步骤如下:
- 获取表单及所有表单组件对应的数据值。
- 将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。
- 通过Ajax异步交互方式提交表单。
var info = 'username='+$('#username').val()+'&password='+$('#password').val();
$.ajax({url: "server.js',type: 'post',data: info,success: function(data){console.log(data);}
});
异步提交表单的案例
-
JSON文件
{"username": "zhangsan","password": "123456","msg": "登录成功！" } -
HTML文件
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>异步提交表单</title><style>input {display: block;margin-bottom: 10px;}</style></head><body><form action="">用户名：<input type="text" id="username" /> 密码：<inputtype="password"id="password"/><input type="submit" /></form><script src="js/jquery-1.12.4.js"></script><script>var $form = $("form");var $username = $("#username");var $password = $("#password");$form.bind("submit", function (event) {// 阻止表单默认的同步提交event.preventDefault();// 1. 获取表单组件的数据内容var username = $username.val();var password = $password.val();// console.log(username);// console.log(password);// post请求方式$.get("data/server5.json", { username }, function (response) {// console.log(response);var usernameJson = response.username;var passwordJson = response.password;if (username === usernameJson && password === passwordJson) {alert("登录成功!");} else {alert("用户名或密码错误");}});});</script></body> </html>效果图
表单序列化
- serialize()方法: 将表单组件对应的数据值序列化为指定格式的字符串内容。
$('form').serialize()
-
serializeArray()方法: 将表单组件对应的数据值序列化为JSON格式的数据内容。
$('select, :radio').serializeArray()
代码演示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表单序列化</title><style>input {display: block;margin-bottom: 10px;}</style></head><body><form action="">用户名：<input type="text" name="username" id="username" /> 密码：<inputtype="password"name="password"id="password"/><input type="submit" /></form><script src="js/jquery-1.12.4.js"></script><script>var $form = $("form");var $username = $("#username");var $password = $("#password");$form.bind("submit", function (event) {// 阻止表单默认的同步提交event.preventDefault();// 表单序列化 - 根据表单默认同步提交获取数据的方式// var data = $("form").serialize();// console.log(data);var data = $("form").serializeArray();console.log(data);// post请求方式$.get("data/server5.json", data, function (response) {console.log(response);});});</script></body>
</html>
