1.监听表单提交事件,并阻止表单提交


$("form").submit(function(e) { return false;//阻止表单提交
})

2.拿到表单内容

let data = $("form").serialize();
//上边这个就是拿到表单的内容,如果你想要json格式,就要自己去处理
//hdxh=1&name=%E5%BC%A0%E4%B8%89
//直接拼在url后边
$.ajax({
url:"xxx"+"?"+data,
success:res=>{
console.log(res{
}
})

3.所以完整代码为:



$("form").submit(function(e) {
let data = $("form").serialize();
$.ajax({
url:"xxx"+"?"+data,
success:res=>{
console.log(res{
}
})
return false;//阻止表单提交
})

注:

有些人写了return false;也会提交,有一个可能是你在异步提交的代码中有错误,导致程序没有走到return false;

jquery让form表单异步提交的更多相关文章

  1. Jquery构建Form表单Post提交数据的简单方法

    $.extend({ PostSubmitForm: function (url, args) { var body = $(document.body), form = $("<fo ...

  2. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  3. 使用jQuery,实现完美的表单异步提交

    jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...

  4. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  5. thinkphp处理jQuery EasyUI form表单问题

    jQuery EasyUI form表单不是ajax方式提交,而是在提交的时候新建一个隐藏的iframe并在iframe里面创建一个与绑定表单一样的表单,然后在iframe里面进行同步提交而不是异步提 ...

  6. 使用ajax方法实现form表单的提交(附源码)

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

  7. 利用 ajax自定义Form表单的提交方式

    需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...

  8. form表单的提交方式

    开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单  <input type="submit"/> <!DOCTYPE htm ...

  9. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

随机推荐

  1. count(*) count(1) count(column)的区别

    count(1)中的1并不是指第一个column: count(*)和count(1)一样,包括对值为NULL的统计: count(column)不包括对值为NULL的统计,这里的column指的不是 ...

  2. sed命令及替换文件内容

    一.sed (三剑客老二) 1.sed 替换文件内容 sed  s###g  file  前面两个#中的是原内容,后两个#中的是替换的内容 例:将a.txt文件中的linux替换成java 但是,此时 ...

  3. Scala 系列(九)—— 继承和特质

    一.继承 1.1 Scala中的继承结构 Scala 中继承关系如下图: Any 是整个继承关系的根节点: AnyRef 包含 Scala Classes 和 Java Classes,等价于 Jav ...

  4. Spring学习之旅(二)--容器

    在 Spring 应用中,所有的对象都在 Spring 容器(container) 里,容器负责对象的创建.配置.装配并管理它们的整个生命周期. Spring 容器 Spring 容器 并不是只有一个 ...

  5. Linux网络配置(10)

    Linux网络配置原理图(NAT模式) 查看网络IP和网关: CentOS7:ip addr CentOS6:ifconfig Ping测试主机之间网络的连通性:ping [www.baidu.com ...

  6. JavaScript get set方法 ES5/ES6写法

    网上鲜有get和set的方法的实例,在这边再mark一下. get和set我个人理解本身只是一个语法糖,它定义的属性相当于“存储器属性” 为内部属性提供了一个方便习惯的读/写方式 ES5写法 func ...

  7. luogu -P1095 守望者的逃离 - 分别DP

    P1095 守望者的逃离: https://www.luogu.org/problemnew/show/P1095 题意: 有一个人要在S长度的直线上跑过去,初始有M的魔法值,用10点魔法值可以在一秒 ...

  8. codeforces E. Phone Talks(dp)

    题目链接:http://codeforces.com/contest/158/problem/E 题意:给出一些电话,有打进来的时间和持续的时间,如果人在打电话,那么新打进来的电话入队,如果人没有打电 ...

  9. CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  10. Python中流程控制语句之IF语句

    生活中经常遇到的各种选择和判断在程序中也会遇到,比如玩色子,猜大小,比如选择哪条路回家?Python程序中同样也会遇到.IF语句就是用作条件判断的控制语句. 语法一: if 条件: # 引号是将条件与 ...