看到一个想收藏的的AJAX小列子
用户登录的验证可以使用 form 表单提交,也可以使用 ajax 技术异步提交。
AJAX 即 Asynchronous Javascript And XML(异步 JavaScript 和 XML),是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
jQuery ajax() 方法法是 jQuery 底层 AJAX 实现。
ajax() 方法有几个重要参数:
$.ajax({url: "detail.html", //发送请求的地址,String类型的参数data:{id:"id"}, //发送到服务器的数据,Object或String类型的参数,如果已经不是字符串,将自动转换为字符串格式。 type: "POST", //请求方式,默认为GET,String类型的参数 dataType:'json', //预期服务器返回的数据类型,String类型的参数;可用类型有(xml,html,json,jsonp,text) timeout:1000, //请求超时时间,毫秒 async: true, // 默认为true,所有请求均为异步请求,Boolean类型的参数 beforeSend:function(XMLHttpRequest){ //发送请求前调用的函数 }, complete:function(XMLHttpRequest, textStatus){ //请求完成后调用的回调函数(请求成功或失败时均调用) }, success:function(){ //请求成功后调用的回调函数 }, error:function(){ //请求失败时被调用的函数 } });
示例:
验证用户登录前台代码
$("#loginBtn").click(function(){var user = new Object(); user.loginCode = $.trim($("#loginCode").val()); user.password = $.trim($("#password").val()); //前台的非空验证 if(user.loginCode == "" || user.loginCode == null){ $("#loginCode").focus; $("#formtip").css("color","red"); $("#formtip").html("对不起,登录账号不能为空。"); }else if(user.password == "" || user.password == null){ $("#password").focus; $("#formtip").css("color","red"); $("#formtip").html("对不起,登录密码不能为空。"); }else{ $("#formtip").html(""); //如果账号和密码都不为空,就进行 ajax 异步提交 $.ajax({ type:'POST', //提交方法是POST url:'/login.html', //请求的路径 data:{user:JSON.stringify(user)}, //以JSON字符串形式把 user 传到后台 dataType:'html', //后台返回的数据类型是html文本 timeout:1000, //请求超时时间,毫秒 error:function(){ //请求失败的回调方法 $("#formtip").css("color","red"); $("#formtip").html("登录失败!请重试。"); }, success:function(result){ //请求成功的回调方法 if(result != "" && result == "success"){ //若登录成功,跳转到"/main.html" window.location.href='/main.html'; }else if(result == "failed"){ $("#formtip").css("color","red"); $("#formtip").html("登录失败!请重试。"); $("#loginCode").val(''); $("#password").val(''); }else if(result == "nologincode"){ $("#formtip").css("color","red"); $("#formtip").html("登录账号不存在!请重试。"); }else if(result == "pwderror"){ $("#formtip").css("color","red"); $("#formtip").html("登录密码错误!请重试。"); }else if("nodata" == result){ $("#formtip").css("color","red"); $("#formtip").html("对不起,没有任何数据需要处理!请重试。"); } } }); } });
验证用户登录后台代码
/*@responseBody注解的作用是将 controller 的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到 response 对象的 body 区,通常用来返回 JSON 数据或者是 XML 数据,需要注意的是,在使用此注解之后不会再走视图处理器,而是直接将数据写入到输入流中,他的效果等同于通过response对象输出指定格式的数据。*/@RequestMapping("/login.html")@ResponseBodypublic Object login(HttpSession session,@RequestParam String user){ //后台非空验证 if(user == null || "".equals(user)){ return "nodata"; }else{ //user 转换成 json 对象,再转成 java 对象 JSONObject userObject = JSONObject.fromObject(user); User userObj= (User)userObject.toBean(userObject, User.class); try { if(userService.loginCodeIsExit(userObj) == 0){//不存在这个登录账号 return "nologincode"; }else{ User _user = userService.getLoginUser(userObj); //登录成功 if(null != _user){ //当前用户存到session中 session.setAttribute(Constants.SESSION_USER, _user); //更新当前用户登录的lastLoginTime User updateLoginTimeUser = new User(); updateLoginTimeUser.setId(_user.getId()); updateLoginTimeUser.setLastLoginTime(new Date()); userService.modifyUser(updateLoginTimeUser); updateLoginTimeUser = null; return "success"; }else{ //密码错误 return "pwderror"; } } } catch (Exception e) { return "failed"; } } }
关于 ajax() 方法更多详细参数及使用方法参见 w3cschool手册
作者:Jason_M_Ho
链接:https://www.jianshu.com/p/d36d8cd508ed
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
看到一个想收藏的的AJAX小列子相关推荐
- 【移动端debug-6】如何做一个App里的web调试小工具
原文链接:如何做一个App里的web调试小工具 我们知道现在hybrid app非常流行,在这样的app里,h5页面是应用非常广泛的.相对于以往在pc端开发的网页,放在app里的网页由于无法直接使用桌 ...
- JQuery AJAX小知识
JQuery AJAX小知识 开发工具与关键技术:SQL Server 2014 Management Studio AJAX小知识 作者:李国旭 撰写时间:2019年5月16日 起初学Jquery的 ...
- JQuery Ajax小磨合-1
一.实现目标 昨天想在网站后台改进个小功能,为了简化user操作步骤,在user输入文件名称后自动进行无刷新验证.功能简单,可是却遇到了意想不到的麻烦,且听我慢慢道来.完成后的效果预览如下: 二.知识 ...
- textureview 缩放_用MediaPlayer+TextureView封装一个完美实现全屏、小窗口的视频播放器...
原标题:用MediaPlayer+TextureView封装一个完美实现全屏.小窗口的视频播放器 本文作者 本文由xiaoyanger授权发布. xiaoyanger的博客地址: http://www ...
- [未来的购碟指南]送给那些以后想收藏真人电影DVD的菜鸟们
随着真人电影在全世界的上映,全世界又掀起了一股新的TF热. 对于我们这些铁杆FANS来说,除了肯定要去电影院观影之外,肯定还要收藏一张这部电影的DVD,以达到圆满. 本人从2002年开始收藏各种DVD ...
- 初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助...
初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: 1 var fs = require( ...
- 分享一个SQL文件的合并的小程序
.net项目做久了,发现发布时候存储过程的打包一直是个很麻烦的事情,就是所有script都放在一个里面一起运行. 我想这个小程序应该对多数.net开发人都有用的,毕竟.net开发下没几个用ORM的,大 ...
- python编写数据库连接工具_详解使用Python写一个向数据库填充数据的小工具(推荐)...
一. 背景 公司又要做一个新项目,是一个合作型项目,我们公司出web展示服务,合作伙伴线下提供展示数据. 而且本次项目是数据统计展示为主要功能,并没有研发对应的数据接入接口,所有展示数据源均来自数据库 ...
- python批量删缩进_鬼畜小姐姐+野狼disco,十分钟教你如何用Python剪辑一个牛逼的抖音小视频?...
鬼畜小姐姐+野狼disco,十分钟教你如何用Python剪辑一个牛逼的抖音小视频? 前言 半个月前,后台有个小伙伴问我,如何将视频中的音频提取出来,并且将声音转成文字写入到 word 中,正好接下来的 ...
最新文章
- 【世界上最优秀的逆向分析工具】IDA Pro6.1绿色版
- Collection和Collections之间的使用与区别
- 微软携手红帽,共筑开源新未来
- 小熊的人生回忆(八)
- python列表count()函数
- MyBatis中一对多和多对一处理
- Eclipse中快速查找类或代码
- TCPIP详解之udp
- 推荐一个强大的串口监控软件(免费)
- 谷歌浏览器如何清理缓存
- My97时间控件限制
- python源文件改写_Python源文件改写.编写一个程序,读取一个Python源程序,将文件中所有除保留字外的小写字母换成大写字母...
- 五一劳动节,向劳动者致敬!
- Linus 大神的在家办公经验(他也撸猫)
- 微软天下行 豪侠汤山会 现场纪实
- python 浮点数精度不准确_浮点数的 “floor division” (例如在python中)是否会导致精度不准?...
- 7段均衡器最佳参数_汽车音响7段均衡器设置,七段均衡器常用调校图
- 关于仙童八叛徒(转)
- Android实现仿真iPhone界面
- UnicodeEncodeError: 'gbk' codec can't encode character '\u200b' in position 0: illegal multibyte seq
热门文章
- 安超云生态 | 安超云与百信完成产品兼容互认证 携手打造协同生态
- 为自己的位置设定好灯光
- activiti-deploy
- TCP/IP 开胃菜 之 HTTP
- ChatGPT+ “剪映 or 百度AIGC” 快速生成短视频
- startssl免费证书申请
- 漫谈 Google 的 Native Client(NaCl) 技术(二)---- 技术篇(兼谈 LLVM)
- SQuAD 数据预处理(1)
- iTunes Connect突然登录不了的原因
- Avoid mutating a prop directly since the value will be overwritten whenever the parent component...