Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >阻止HTML表单提交跳转页面,使用 Jquery Ajax 请求接口

阻止HTML表单提交跳转页面,使用 Jquery Ajax 请求接口

作者头像
很酷的站长
发布于 2023-01-16 02:05:29
发布于 2023-01-16 02:05:29
3.2K00
代码可运行
举报
运行总次数:0
代码可运行

站长源码网

1. HTML 表单

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="" method="post" onsubmit="return save(this)">
手机号 <input type="text" name="mobile" autocomplete="off">
登录密码 <input type="text" name="password" autocomplete="off">
<button>提交</button>
</form>
2. Javascript 函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
* 提交表单
*/
function save(obj)
{
var formData = {};
var array = $(obj).serializeArray();
$.each(array, function() {
formData[this.name] = this.value;
});
console.log(formData)
$.ajax({
url: '',
type: 'post',
async: false,
data: formData,
success: res => {
console.log(res)
}
})
return false;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
三、jQuery中的Ajax
.get(url,[data],[callback],[type])与.post(url,[data],[callback],[type])
Dreamy.TZK
2020/08/24
3.9K0
三、jQuery中的Ajax
form表单提交的几种方式
完成后启动项目 并访问http://localhost:8080/query.html 输入用户名和密码
全栈程序员站长
2022/07/21
6.6K0
form表单提交的几种方式
Python进阶30-Django AJAX
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/09/26
7860
Python进阶30-Django AJAX
form实现表单提交的各种方法(表单提交源码)
这种方法实际上是调用了一个javascript函数,使用javacript函数来提交表单,方法就非常多非常灵活了,比如可以把它加入到任意一个标签的onclick事件中:
全栈程序员站长
2022/08/01
5.8K0
jquery的form表单提交
在Web开发中,表单提交是一个常见的操作,通过表单提交用户可以向服务器发送数据。jQuery是一个流行的JavaScript库,可以简化处理JavaScript的操作,包括表单提交。在本篇博客中,我们将介绍如何使用jQuery来实现表单提交操作。
大盘鸡拌面
2024/05/08
4460
你还在手动拼接ajax数据吗?还不会通过ajax实现文件上传?
通过Formdata你就不用手动拼接表单元素的值了如name:sdd&pwd:dsf... 或许你会疑惑我为什么要手动拼接表单值,直接提交不就行了吗?有些时候我们会通过ajax提交表单,通过ajax提交表单时我们不得不手动拼接表单值,数量少还好数量多很容易出错,写着也烦,此处笔者深有体会啊, 不仅如此Formdata支持文件上传,这就意味着你可以通过ajax实现异步文件这在web开发中太有用了,此博客后台上传文件就是通过Formdata
切图仔
2022/09/08
5830
【jquery ajax】实现文件上传提交
✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学 Node.js教学 从头开始学习 ajax学习 在这里看原生ajax实现文件上传 文章目录 JQuery实现文件上传提交   定义UI结构   验证是否选择了文件   向FormData中追加文件并发起ajax请求   jquery实现loading效果   完整代码 JQuery实现文件上传提交   定义UI结构 <script src="https://cdn.
坚毅的小解同志的前端社区
2022/11/28
4.1K0
【jquery ajax】实现文件上传提交
python测试开发django-165.form表单序列化json的2种方式
调用.serialize() 方法会生成 email=aa&password=123456 这种格式的参数
上海-悠悠
2021/11/16
6670
异步提交表单_js异步提交表单并回调
所谓异步提交表单,就是不再使用表单的提交按钮实现表单的提交功能,而是通过Ajax异步交互方式实现表单提交。具体实现步骤如下:
全栈程序员站长
2022/11/17
12.1K0
异步提交表单_js异步提交表单并回调
Django Ajax序列化与反序列化
序列化与反序列是最常用的功能,有时我们需要将一个表单组打包成Json格式等然后再提交给服务端,这样可以提高效率节约带框,如下是Django配合Ajax实现的序列化与反序列化,文件上传等操作。
王瑞MVP
2022/12/28
2.8K0
form表单提交与ajax消息传递
后台: def index(request): if request.method == 'POST': print(request.POST) # 普通的键值对:<QueryDict: {'name': ['xxx']}> print(request.body) #print(request.FILES) #传文件< MultiValueDict: {'myfile': [ < InMemoryUploadedFile: day17课件.md(application / octet - stream) >]} > return HttpResponse('OK') return render(request, 'index.html')
小小咸鱼YwY
2019/09/11
3.9K0
【jquery Ajax 】form表单教学+评论案例
表单在网页中主要负责数据采集功能,HTML中的<form>标签,就是用于采集用户输入的信息,并通过<form>标签的提交操作,把采集到的信息提交到服务器端进行处理。
坚毅的小解同志的前端社区
2022/11/28
2.2K1
【jquery Ajax 】form表单教学+评论案例
jQuery中的常用内容总结(三)
jQuery中的常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 内容提要 ---- 选择器(第一节) 选择器的扩展方法(第一节) 节点的CSS操作及节点其他操作(第一节) Ajax同步与异步(上一节) 事件(上一节) 弹窗(上一节) 参数序列化(本节) 遍历(本节) 其他(本节) ---- A>表单参数序列化提交 如果没有借助jQuery,表单可以直接提交,这样带来两个问题就是安全(get提交)或表单参数验证障碍,嗯~,可能
上帝
2018/05/18
2K1
Ajax 实战
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)
HammerZe
2022/03/25
1.5K0
Ajax 实战
form表单提交的几种方式
上面代码就可以直接完成form表单的提交,提交地址为test.php。但大部分时候我们都需要对提交的内容进行校验。这时候就需要用到了onsubmit了。
用户1349575
2022/02/22
1.8K0
thinkphp-ajax异步验证之ajaxReturn的使用
但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。
PM吃瓜
2019/08/12
1.2K0
SpringMVC 异步提交表单数据
使用SpringMVC和JQuery,异步post提交还有文件的表单。 异步Get Spring配置 <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"> <property name="messageConverters"> <list> <bean class="org.springframework.http.converter.St
白凡
2018/08/07
1.4K0
springboot展示页面(及关于ajax中页面不跳转问题)
当按钮typ为submit时,在ajax的success的方法中window.location,href跳转不起作用;
JQ实验室
2022/02/10
2.1K0
《Ajax科普入门》用Ajax写个经典影视台词网易云评论无限滚动
为了让提升用户体验,微软在IE5中引入了XMLHttpRequest, 简称XHR,XMLHttpRequest的出现,可以让网页无需刷新,即可从服务器获取最新的内容,这项技术也就是所谓的Ajax
zhaoolee
2021/12/07
1.2K0
《Ajax科普入门》用Ajax写个经典影视台词网易云评论无限滚动
34.Ajax
优先级 如果发送的是【普通数据】 jQuery XMLHttpRequest iframe 如果发送的是【文件】 iframe jQuery(FormData) XMLHttpRequest(FormData) 原生Ajax Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件) 1、XmlHttpRequest对象介绍 XmlHttpRequest对象的主要方法: a. void op
zhang_derek
2018/04/11
1.9K0
相关推荐
三、jQuery中的Ajax
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验