异步提交表单
异步提交表单的步骤
所谓异步提交表单,就是不再使用表单的提交按钮实现表单的提交功能,而是通过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" /> 密码:<input type="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" /> 密码:<input
type="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>