首页 前端知识 4.jQuery中Ajax提交表单数据

4.jQuery中Ajax提交表单数据

2024-06-21 00:06:12 前端知识 前端哥 36 713 我要收藏

目录

1  表单的同步提交

2  Ajax监听表单提交事件 submit

3  阻止表单的默认提交行为 e.preventDefault()

4  获取表单内的数据

4.1 字符串型 serialize()

4.2  数组包着对象型 serializeArray()


1  表单的同步提交

点击submit按钮的时候会将页面跳转到action的url,提交表单信息与跳转url是同步的,所以这个过程叫表单的同步提交

同步提交会有两个问题

  • 提交后会跳转到新的页面
  • 之前页面的状态会丢失

我们现在将第二个input的类型改为password

这个时候点击后退

发现你之前输入的password的内容就没有了

我们让表单只采集数据,Ajax发送数据,这样就不会发生页面的跳转,就会避免了上面两个问题

2  Ajax监听表单提交事件 submit

这两种方式都可以,我下面就用on做例子

html

js

发现可以触发submit事件

但是还是会跳转到action的url

3  阻止表单的默认提交行为 e.preventDefault()

调用事件对象的event.preventDefault()可以阻止表单的默认提交行为

html

js

使用.on或者.submit都是一样的,相同的事件对象,相同的方法

点击提交后还是这个页面,并且执行了该事件的函数

4  获取表单内的数据

4.1 字符串型 serialize()

可以通过val()这种方法拿到指定元素的数据,那种方法如果在表单中有多个信息就比较麻烦,我们可以使用serialize()一次获取表单提交的全部数据

  • 使用$(selector)获取表单元素

  • 表单中的每一个input需要有name属性,哪个没有哪个就获取不到

点击提交后会获得用户提交的数据,获取到的变量类型为字符串

点击提交后会获得用户提交的数据,获取到的变量类型为字符串

serialize()可以直接传入Ajax的data中,使用起来很方便,但是serialize()不方便校验

4.2  数组包着对象型 serializeArray()

serializeArray()同样可以直接传入Ajax的data,serializeArray()校验起来要方便一些

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13045.html
标签
评论
发布的文章

vue3生成聊天对话框功能

2024-07-10 18:07:36

json基本格式

2024-07-08 09:07:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!