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.1 ,表单的同步提交及缺点

  • 表单同步提交后,整个页面会发生跳转,跳转到 action URL 所指向的地址,用户体验很差。
  • 表单同步提交后,页面之前的状态和数据会丢失
 $('#f1').on('submit', function () {  
        alert('监听到了表单的提交事件')
      })

如何解决上面的问题

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

1.2,通过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() );

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值