Ajax学习笔记（四）:表单

• 表单标签：<form>
• 表单域：用于采集用户信息的文本输入框等，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
• 表单按钮：button，点击button之后就将采集到的信息传送到服务器上。

<form>
    <input type="text" name="email_or_mobile" />
    <input type="password" name="password" />
    <input type="checkbox" name="remember_me" checked />
    <button type="submit">提交</button>
</form>

1.1表单属性

A.action

• action 属性用来规定当提交表单时，向何处发送表单数据。
• action 属性的值应该是后端提供的一个 URL 地址，专门负责接收表单提交过来的数据。
• 当 <form> 表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。
• 注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址

B.target

• target 属性用来规定在何处打开 action URL。
• 它的可选值有5个，默认情况下，target 的值是 _self，表示在相同的框架中打开 action URL。

C.method

• 注意：（1）在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data
• （2）如果表单的提交不涉及到文件上传操作，则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可！

1.2表单同步提交

a.通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。

b.缺点：

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

c.解决方法：表单只负责采集数据，Ajax 负责将数据提交到服务器。

2.通过Ajax提交表单数据

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

2.1监听表单提交事件

$(function(){
    // 第一种方式
    $("#f1").submit(function(){
        alert("收到了监听数据");
    })

    // 第二种方式
    $("#f1").on("submit",function(){
        alert("收到了监听数据");
    })
})

2.2阻止表单默认提交行为

当监听到表单的提交事件以后，就会提交到form的action里面的位置。所以我们可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下：

$(function () {
    // 第一种方式，重点是有个e
    $('#f1').submit(function (e) {
        alert('监听到了表单的提交事件')
        e.preventDefault()
    })

    // 第二种方式
    $('#f1').on('submit', function (e) {  
        alert('监听到了表单的提交事件2')
        e.preventDefault()
    })
})

2.3快速获取表单中的数据

为了简化表单中数据的获取操作，jQuery 提供了 serialize() 函数，其优势是可以一次性获取到表单中的所有的数据。

其语法格式如下：

$(selector).serialize()

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

$(function() {
    // 第一种方式
    $('#f1').submit(function(e) {
        e.preventDefault()
            var data = $(this).serialize()
            console.log(data)
        })

        // 第二种方式
        $('#f1').on('submit', function(e) {
        e.preventDefault()
            var data = $('#f1').serialize()
            console.log(data)
        })
    })