通过Ajax提交表单的数据

岳泽以

发布于 2022-10-26 17:29:27

2.2K0

发布于 2022-10-26 17:29:27

文章被收录于专栏：岳泽以博客岳泽以博客

表单同步提交的缺点

<form>表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验很差。
<form>表单同步提交后，页面之前的状态和数据会丢失。

解决方案：

表单只负责采集数据，Ajax负责将数据提交到服务器。

监听表单提交事情

在jQuery中，可以使用如下俩种方式，监听到表单的提交事件

方法一：

            $('#f1').submit(function (e) {
                alert('监听到了表单的提交事件！')
            })

方法二：

            $('#f1').on('submit', function (e) {
                alert('监听到了表单提交事件')
            })

阻止表单的默认提交行为

当监听到表单的提交事件后，可以调用事件对象的 event.preventDefault()函数，来阻止表单的提交和页面的跳转，示例代码如下：

            $('#f1').submit(function (e) {
                //阻止表单的提交和页面的跳转
                e.preventDefault()
            })
或
            $('#f1').on('submit', function () {
                 //阻止表单的提交和页面的跳转
                e.preventDefault()
            })

快速获取表单中的数据

1.serialize()函数

为了简化表单中数据的获取操作，jQuery提供了 serialize()函数，其语法格式如下：

$(selector).serialize()

好处：可以一次性获取到表单中的所有数据。

2.serialize()函数示例

    <form id="f1">
        <input type="text" name="user_name">
        <input type="password" name="password">
        <button type="submit">提交</button>
    </form>

  $('#f1').submit(function (e) {
                //阻止表单的提交和页面的跳转
                e.preventDefault()
                var data = $(this).serialize()
                console.log(data);
                //结果：username=用户名的值&password=密码的值
            })

注意：在使用 serialize()函数快速获取表单数据时，必须为每个表单元素添加name属性！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022 年 09 月，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery