php ajax form表单提交,Ajax方法实现Form表单提交的方法
这次给大家带来Ajax方法实现Form表单提交的方法,Ajax方法实现Form表单提交的注意事项有哪些,下面就是实战案例,一起来看一下。
写在前面的话
在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化。
一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作。
常见的form表单提交方式
login test
用户名:
密 码:
 
点击登录按钮后,即触发form表单的提交事件,数据传输至后端,由后端控制页面跳转和数据。
ajax实现form提交方式
修改完成后代码如下:
login test
function login() {
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//服务端接收的数据类型
url: "/users/login" ,//url
data: $('#form1').serialize(),
success: function (result) {
console.log(result);//打印服务端返回的数据(调试用)
if (result.resultCode == 200) {
alert("SUCCESS");
}
;
},
error : function() {
alert("异常!");
}
});
}
用户名:
密 码:
注意事项在常用方式中,点击的登录按钮的type为"submit"类型;
在常用方式中,form的action不为空;
ajax方式中需要注意的是$.ajax方法中的参数:dataType和data。
我平时很少写前端代码,级别也就是入门级别,能看懂能改而已,所以很多时候都是百度,像这次这个功能的实现也是借助了百度,但是,我百度到的代码在$.ajax方法中设置的dataType参数值为"html"而不是"json",导致我在一开始调试的时候一直报错,最终是改成了"json"才成功,因此在这里特别说明并提醒一下,别和我一样走错了路,还有就是向服务端传输的data值了,像上面代码一样,将form表单中的数据序列化传输即可。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
php ajax form表单提交,Ajax方法实现Form表单提交的方法相关推荐
- 使用ajax方法实现form表单的提交
2019独角兽企业重金招聘Python工程师标准>>> 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控 ...
- form表单以ajax方法提交,附加额外的数据
在项目中有个添加账户的模块,如下图.填写的信息以表单是形式ajax的方法提交,但是又需要添加额外信息给后台(比如:创建人),首先要引入JQuery.js库,和jquery.form.js var op ...
- 前后端交互之使用ajax方法实现form表单的提交
转载于:使用ajax方法实现form表单的提交 - 程序员十三 - 博客园 (cnblogs.com) οnsubmit="reutrn false":表示禁止表单提交. dat ...
- 使用ajax方法实现form表单的提交(Ajax和from提交的区别)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- ajax 模拟表单提交,Ajax模拟Form表单提交,含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
- 在django的form表单及ajax提交的数据中添加认证的csrfmiddlewaretoken
1. 对于ajax提交数据,把下面的代码加入到js的头部,可以保证ajax执行时自动提交参数csrfmiddlewaretoken. $.ajaxSetup({data: {csrfmiddlewar ...
- jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
- from提交ajax,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- form表单与ajax的两种提交方式
一.form表单与ajax两种提交方式使用的场景: 1)form表单提交适用于跳转到另一个页面,form标签中的数据通过submit的方式提交到后台,提交成功后会跳转到另一个页面,但没有返回值. 2) ...
最新文章
- Linux学习笔记之文件管理和目录管理类命令
- 浙大Java延毕_复旦博导:我有个“拼命三郎”似的博士生,却也面临延毕,做科研得有章法!......
- centos配置yum本地源
- springboot使用imageio返回图片_SpringBoot 二维码生成(复制即用)
- 在JSP页面中获取系统当前日期时间
- C# 调用c++ 实例
- java 制作动态手机壁纸_android 动态切换壁纸实例 利用service机制实现 附完整源码 带动态截图...
- 赚钱只要找到方法,就如吸空气
- 为什么企业要做CMMI资质认证?
- 西门子Smart 200 PLC 封装运动控制向导生成指令(脉冲)
- 2016《A survey of transfer learning》迁移学习笔记
- Mac 打造开发工作环境
- 极光短信在程序中(JAVA)的使用
- 华为帐号登录游戏显示无法连接服务器,玩手机游戏提示无法连接服务器
- Android app设置字体大小和字体样式不随系统设置改变而改变
- 2022年(23届)电子信息/通信工程保研|四非上岸浙大的保研之旅(浙大、中科大、哈工大、东南、南开、西电、成电等)
- marshmallow库的简单学习
- 使用PHP环境一键安装包快速搭建PHP开发环境
- JavaSE基础知识(附上代码实现)1
- Centos7开放3306端口
热门文章
- 艾永亮:7-11,以产品的方式做零售
- 王者荣耀英雄选择分析
- linux cp不改变权限,linux中cp、chgrp、chattr、usermode等命令
- 如何做好游戏内实时语音体验 1
- 普通高中课程标准实验教科书(必修)数学2_学习笔记
- OpenGL glBlendFunc() 设置颜色混合 透明度叠加计算
- Avaya大中华区CTO李农:阿里云计算巢加快Avaya应用云部署
- 如何使用Movavi Picverse为照片添加字幕?
- 语种切换_多语种跳转研究试运行全程直播:莫使金樽空对月
- 2022甘肃最新消防设施操作员模拟考试试题题库及答案