监听表单提交事件
在jQuery中,可以使用以下两种方式,监听到表单的提交事件
$('#form').submit(function(e) {
alert('监听到了表单的提交事件');
})
$('#form').on('submit', function(e) {
alert('监听到了表单的提交事件');
})
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<script src="../../js/jQuery.js">
</script>
</head>
<body>
<form action="/login" id="f1">
<input type="text" name="user_name">
<input type="password" name="password">
<button type="submit">提交</button>
</form>
<script>
$(function() {
//第一种方式
// $('#f1').submit(function(object) {
// alert('监听到表单的提交')
// })
//第二种方式
$('#f1').on('submit', function() {
alert('监听到表单的提交');
})
})
</script>
</body>
</html>
阻止表单默认提交行为
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<script src="../../js/jQuery.js">
</script>
</head>
<body>
<form action="/login" id="f1">
<input type="text" name="user_name">
<input type="password" name="password">
<button type="submit">提交</button>
</form>
<script>
$(function() {
//第一种方式
// $('#f1').submit(function(object) {
// alert('监听到表单的提交')
// })
//第二种方式
$('#f1').on('submit', function() {
alert('监听到表单的提交');
})
//组织表单默认提交行为和页面的跳转
//第一种方式
// $('#f1').submit(function(e) {
// e.preventDefault();
// })
//第二种方式
$('#f1').on('submit', function(e) {
e.preventDefault();
alert('阻止了表单的默认行为');
})
})
</script>
</body>
</html>
快速获取表单中的数据
serialize()函数
为了简化表单中数据的获取操作,jQuery提供了serialize()函数,语法格式如下:
$(selector).serialize();
serialize()函数的好处: 可以一次性获取到列表中所有的数据
注意: 在使用serialize()函数快速获取表单数据时,必须为每个表单元素添加name属性
serialize()函数示例
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<body>
<form action="" id="form1">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">提交</button>
</form>
<script src="../../js/jQuery.js"></script>
<script>
$(function() {
$('#form1').on('submit', function(e) {
e.preventDefault();
var data = $(this).serialize();
console.log(data);
})
})
</script>
</body>
</html>