用户登录的验证可以使用 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")
@ResponseBody
public 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小列子的更多相关文章

  1. 第一个ajax小demo

    第一个ajax小demo 文章来源:http://blog.csdn.net/magi1201/article/details/44569657

  2. JavaScript初学者福利!必须收藏的24条小技巧

    JavaScript初学者福利!必须收藏的24条小技巧 前端小编 发布于 2013-12-15 22:52 查看数: 2343 评论数: 6 帖子模式 这篇文章将回顾JavaScript的知识 !如果 ...

  3. Salt Stack 官方文档翻译 - 一个想做dba的sa - 博客频道 - CSDN.NET

    OSNIT_百度百科 Salt Stack 官方文档翻译 - 一个想做dba的sa - 博客频道 - CSDN.NET Salt Stack 官方文档翻译 分类: 自动运维 2013-04-02 11 ...

  4. 【移动端debug-6】如何做一个App里的web调试小工具

    原文链接:如何做一个App里的web调试小工具 我们知道现在hybrid app非常流行,在这样的app里,h5页面是应用非常广泛的.相对于以往在pc端开发的网页,放在app里的网页由于无法直接使用桌 ...

  5. 一个简单的猜大小的小游戏 python

    初学python,用python写了一个简单的猜大小的小游戏 #!/usr/bin/env python #-*- coding:utf-8 -*- print "------------- ...

  6. 初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助

    初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: var fs = require('f ...

  7. 一个Json结构对比的Python小工具兼谈编程求解问题

    先上代码. jsondiff.py #!/usr/bin/python #_*_encoding:utf-8_*_ import argparse import json import sys rel ...

  8. bug日记之---------js中调用另一个js中的有ajax的方法, 返回值为undefind

    今天做一个OCR授权的需求, 需要开发一个OCR弹框, 让用户选择是否授权给第三方识别公司(旷世科技)保存和识别用户个人信息, 照片等. 其中用到了在一个js的方法中调用另外一个js的方法, 其中有一 ...

  9. AJAX小示例

    一. 基本内容 定义:AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步的Javascript和XML",即使用Javascript语言 ...

随机推荐

  1. spring springmvc mybatis maven 项目整合示例-导航页面

    spring原理 实践解析-简单的helloworld spring原理案例-基本项目搭建 01 spring framework 下载 官网下载spring jar包 spring原理案例-基本项目 ...

  2. yum安装php Requires: libzip5(x86-64) >= 1.3.2

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  3. Go Web:RESTful web service示例

    RESTful架构的简介 web服务的架构模式主要有2种:SOAP和REST.SOAP和REST都回答了同一个问题:如何访问web服务. SOAP风格的程序是功能驱动的,要借助xml来传递数据,明确表 ...

  4. Django 系列博客(二)

    Django 系列博客(二) 前言 今天博客的内容为使用 Django 完成第一个 Django 页面,并进行一些简单页面的搭建和转跳. 命令行搭建 Django 项目 创建纯净虚拟环境 在上一篇博客 ...

  5. MONGODB(二)——索引操作

    一.1.插入10w条数据> for(var i = 0;i<100000;i++){... var rand = parseInt(i*Math.random());... db.pers ...

  6. lua的table元类

    Lua中提供的元表是用于帮助Lua数据变量完成某些非预定义功能的个性化行为,如两个table的相加.假设a和b都是table,通过元表可以定义如何计算表达式a+b.当Lua试图将两个table相加时, ...

  7. IdentityServer4 中文文档 -15- (快速入门)添加 JavaScript 客户端

    IdentityServer4 中文文档 -15- (快速入门)添加 JavaScript 客户端 原文:http://docs.identityserver.io/en/release/quicks ...

  8. 【转】10 个很有用的 jQuery 弹出层提示插件

    模态对话框为网站用户提供了快速显示信息的方法,也可以用来提示错误.警告和确认等信息,这里介绍了 10 个弹出模态对话框插件. How to Create a jQuery Confirm Dialog ...

  9. Tomcat服务器为java项目配置顶级域名

    修改端口, Tomcat服务器下conf/server.xml文件      把端口号更改为80 解释:输入域名时默认进入80端口,如果没修改则需要输入端口号才能进入. Eg:www.xxx.com: ...

  10. json接口返回值

    SpringBoot响应客户端渲染数据 1.SpringBoot构造并且返回一个json对象 首先,我们在父包下新建一个pojo的包,并新建一个User类  IDEA自动生成对应的get/set,然后 ...