[JavaScript知识库]ajax中form表单的提交- 序列化表单

1， form标签的属性

form标签用来采集数据，form标签的属性则是用来规定如何把采集到的数据发送给服务器

2，get 和post提交数据的区别

• get 方式适合用来提交少量的、简单的数据。

• post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。

• 在实际开发中， 表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post
  方式来提交表单。

  注意：

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

1.3 ，表单的同步提交及缺点

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

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

如何解决上面的问题

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

1.4，通过Ajax提交表单数据

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

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

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

在阻止表单提交数据后我们要向想拿到数据，我们不可能是把每一个input 设置一个id属性
因此jquery给我们提供了 ：

$(selector).serialize()函数

serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。

serialize()函数常用于将表单内容序列化，以便用于AJAX提交。

同时该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。
例如：

1. 不在<form>标签内的表单控件不会被提交、

2. 没有name属性的表单控件不会被提交、

3. 带有disabled属性的表单控件不会被提交、

4. 没有被选中的表单控件不会被提交。

  <form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="张三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="点击" />
</form>

// 序列化内的所有表单元素
序列化后的结果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

阅读世界，共赴山海

423全民读书节，邀你共读