Ajax提交表单数据

m0_63400611

已于 2022-05-18 16:13:14 修改

阅读量74

点赞数

分类专栏： ajax 文章标签： ajax

于 2022-03-22 16:37:34 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/123659553

版权

ajax 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在jQuery中监听表单提交事件，包括两种不同的方法，并展示了如何阻止表单的默认提交行为。同时，文章还详细解释了如何使用serialize()函数方便地获取表单数据，强调了在使用serialize()时需为表单元素设置name属性的重要性。

摘要由CSDN通过智能技术生成

监听表单提交事件

在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>

m0_63400611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax提交表单数据

监听表单提交事件在jQuery中,可以使用以下两种方式,监听到表单的提交事件$('#form').submit(function(e) { alert('监听到了表单的提交事件');})$('#form').on('submit', function(e) { alert('监听到了表单的提交事件');})<!DOCTYPE html><html lang="zh-CN"><head> <meta charset
复制链接

扫一扫

专栏目录