java ajax 登录验证码,AJAX+JAVA用户登陆注册验证

需求

通过ajax异步刷新页面验证用户输入的账号密码是否在数据库中存在。

技术栈

JSP+Servlet+Oracle

具体代码

JSP部分:

pageEncoding="UTF-8"%>

Insert title here

function createXMLHttpRequest() {

try {

xmlHttp = new XMLHttpRequest();//除了ie之外的其他浏览器使用ajax

} catch (tryMS) {

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//ie浏览器适配

} catch (otherMS) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//ie浏览器适配

} catch (failed) {

xmlHttp = null;

}

}

}

return xmlHttp;

}

//提交请求

var xmlHttp;

function checkUserExists() {

var u = document.getElementById("uname");

var username = u.value;

if (username == "") {

alert("请输入用户名");

u.focus();

return false;

}

//访问字符串

var url = "loginServlet";

//创建核心xmlhttprequest组件

xmlHttp = createXMLHttpRequest();

//设置回调函数

xmlHttp.onreadystatechange = proessRequest;

//初始化核心组件

xmlHttp.open("post", url, true);

//设置请求头

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

//发送请求

xmlHttp.send("uname="+username);

}

//回调函数

function proessRequest() {

if (xmlHttp.status==200 && xmlHttp.readyState == 4) {

var b = xmlHttp.responseText;//得到服务端的输出结果

if (b=="true") {

document.getElementById("alert").innerHTML = "用户名已经存在!";

}else {

document.getElementById("alert").innerHTML = "用户名可以使用!";

}

}

}

请输入用户名:

这里没有用Dao层,直接用servlet和service层进行验证。

下面是service下JDBC查询的代码:

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import com.stx.service.User;

import com.stx.service.ConnectionManager;

public class ajaxService {

public boolean searchUser (String uname) {

//jdbc查询用户名是否存在

boolean isFalse = false;

Connection connection = null;

Statement stmt = null;

ResultSet rs = null;

connection = ConnectionManager.getConnection();

try {

stmt = connection.createStatement();

String sql = "select * from user_b where uname='"+uname+"'";//sql语句

rs = stmt.executeQuery(sql);

isFalse=rs.next();

} catch (SQLException e) {

e.printStackTrace();

} finally {

ConnectionManager.closeResultSet(rs);

ConnectionManager.closeStatement(stmt);

ConnectionManager.closeConnection(connection);

}

return isFalse;

}

}

JDBC连接代码:

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

public class ConnectionManager {

private final static String DRIVER_CLASS = "oracle.jdbc.OracleDriver";

private final static String URL = "jdbc:oracle:thin:@localhost:1521:orcl";

private final static String DBNAME = "ibook";

private final static String PASSWORD = "qwer";

public static Connection getConnection() {

Connection connection = null;

try {

Class.forName(DRIVER_CLASS);

connection = DriverManager.getConnection(URL, DBNAME, PASSWORD);

} catch (ClassNotFoundException e) {

e.printStackTrace();

} catch (SQLException e) {

e.printStackTrace();

}

return connection;

}

public static void closeResultSet(ResultSet rs) {

try {

if (rs != null)

rs.close();

} catch (SQLException e) {

e.printStackTrace();

}

}

public static void closeConnection(Connection connection) {

try {

if (connection != null && !connection.isClosed())

connection.close();

} catch (SQLException e) {

e.printStackTrace();

}

}

public static void closeStatement(Statement stmt) {

try {

if (stmt != null)

stmt.close();

} catch (SQLException e) {

e.printStackTrace();

}

}

}

关于user类:

public class User {

private String uname;

public User() {

super();

}

public User(String uname) {

super();

this.uname = uname;

}

public String getUname() {

return uname;

}

public void setUname(String uname) {

this.uname = uname;

}

关于控制层servlet:

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.stx.service.ajaxService;

/**

* Servlet implementation class loginServlet

*/

public class loginServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

private ajaxService ajaxService = new ajaxService();

/**

* @see HttpServlet#HttpServlet()

*/

public loginServlet() {

super();

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

*/

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

String uname = request.getParameter("uname");//获取到输入的用户名

boolean isUname = ajaxService.searchUser(uname);//调用service中的查询方法

response.setCharacterEncoding("UTF-8");//设置字符编码

PrintWriter out = response.getWriter();

out.print(isUname);

out.flush();

out.close();//关闭资源

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

*/

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

doGet(request, response);

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现短信验证码登录,需要以下步骤: 1. 前端页面中添加手机号码输入框和获取验证码按钮。 2. 用户输入手机号码后,点击获取验证码按钮,前端发送请求到后端获取验证码。 3. 后端接收到请求后,生成随机验证码,并将验证码保存到缓存中,同时调用短信接口将验证码发送给用户。 4. 用户输入收到的验证码后,前端将手机号码和验证码发送到后端进行验证。 5. 后端从缓存中获取对应手机号码的验证码进行比对,如果验证码正确,则返回登录成功的信息。 下面是Java实现短信验证码登录的示例代码: 1. 在pom.xml文件中添加以下依赖: ```xml <dependency> <groupId>com.aliyun</groupId> <artifactId>aliyun-java-sdk-core</artifactId> <version>4.5.0</version> </dependency> ``` 2. 在后端代码中添加以下方法: ```java // 发送短信验证码 public boolean sendSmsCode(String phoneNumber) { // 生成随机验证码 String code = String.valueOf((int)((Math.random()*9+1)*100000)); // 将验证码保存到缓存中,有效期为5分钟 // 这里使用redis作为缓存,需要自行安装redis并添加依赖 redisTemplate.opsForValue().set(phoneNumber, code, 5, TimeUnit.MINUTES); // 调用阿里云短信接口发送验证码 DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "accessKeyId", "accessSecret"); IAcsClient client = new DefaultAcsClient(profile); CommonRequest request = new CommonRequest(); request.setMethod(MethodType.POST); request.setDomain("dysmsapi.aliyuncs.com"); request.setVersion("2017-05-25"); request.setAction("SendSms"); request.putQueryParameter("PhoneNumbers", phoneNumber); request.putQueryParameter("SignName", "短信签名"); request.putQueryParameter("TemplateCode", "短信模板ID"); request.putQueryParameter("TemplateParam", "{\"code\":\"" + code + "\"}"); try { CommonResponse response = client.getCommonResponse(request); String result = response.getData(); // 判断短信是否发送成功 JSONObject jsonObject = JSON.parseObject(result); if (jsonObject.get("Code").toString().equals("OK")) { return true; } return false; } catch (Exception e) { e.printStackTrace(); return false; } } // 验证短信验证码 public boolean verifySmsCode(String phoneNumber, String code) { // 从缓存中获取对应手机号码的验证码 String smsCode = (String) redisTemplate.opsForValue().get(phoneNumber); // 比对验证码是否正确 if (smsCode != null && smsCode.equals(code)) { return true; } return false; } ``` 3. 在Controller中添加以下接口: ```java // 发送短信验证码 @RequestMapping(value = "/sendSmsCode", method = RequestMethod.POST) public Result sendSmsCode(@RequestParam("phoneNumber") String phoneNumber) { boolean isSuccess = userService.sendSmsCode(phoneNumber); if (isSuccess) { return Result.success("短信验证码发送成功"); } else { return Result.fail("短信验证码发送失败"); } } // 短信验证码登录 @RequestMapping(value = "/loginBySmsCode", method = RequestMethod.POST) public Result loginBySmsCode(@RequestParam("phoneNumber") String phoneNumber, @RequestParam("code") String code) { // 验证短信验证码是否正确 boolean isVerified = userService.verifySmsCode(phoneNumber, code); if (isVerified) { // 验证通过,返回登录成功的信息 return Result.success("登录成功"); } else { // 验证失败,返回登录失败的信息 return Result.fail("验证码错误"); } } ``` 4. 在前端页面中添加以下代码: ```html <!-- 手机号码输入框 --> <input type="text" id="phoneNumber" placeholder="请输入手机号码"> <!-- 获取验证码按钮 --> <button onclick="sendSmsCode()">获取验证码</button> <!-- 短信验证码输入框 --> <input type="text" id="smsCode" placeholder="请输入短信验证码"> <!-- 登录按钮 --> <button onclick="loginBySmsCode()">登录</button> <script> // 发送短信验证码 function sendSmsCode() { var phoneNumber = $("#phoneNumber").val(); $.ajax({ type: "POST", url: "/sendSmsCode", data: { "phoneNumber": phoneNumber }, success: function (result) { alert(result.message); }, error: function () { alert("发送短信验证码失败"); } }); } // 短信验证码登录 function loginBySmsCode() { var phoneNumber = $("#phoneNumber").val(); var smsCode = $("#smsCode").val(); $.ajax({ type: "POST", url: "/loginBySmsCode", data: { "phoneNumber": phoneNumber, "code": smsCode }, success: function (result) { alert(result.message); }, error: function () { alert("短信验证码登录失败"); } }); } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值