提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

通过Ajax提交表单的数据

AJAX数据 通过 提交 表单
2023-06-13 09:14:04 时间

表单同步提交的缺点

  1. <form>表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验很差。
  2. <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属性！

相关文章