您的位置：首页 > Web前端 > JQuery

spring+jquery+ajax 检测用户名是否存在

2016-12-10 18:42 423 查看

spring+jquery+ajax 检测用户名是否存在

话不多说，直接上代码

register.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CheckUser</title>
</head>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function ine(data) {

if (data == 1) {
document.getElementById("checkUN").innerHTML = "<b style='color: red'>用户名已存在</b>";
} else if (data == 2) {
document.getElementById("checkUN").innerHTML = "<b style='color:red'>不能为空</b>";
} else if (data == 3) {
document.getElementById("checkUN").innerHTML = "<b style='color:green'>该用户名可用</b>"
} else if (data == 0) {
document.getElementById("checkUN").innerHTML = "<b style='color:red'>ajax成功返回值为空</b>"
} else {
document.getElementById("checkUN").innerHTML = "<b style='color:red'>未知错误</b>"
}
}

function checkUser() {
var name = $('#userName').val();
var s = 0;
$.ajax({
type : "post",
url : 'checkUser.jsp',
data : "name=" + name,
success : function(data) {
ine(data);
}
});

}

$(document).ready(function() {
$("#userName").blur(function() {
checkUser();
});
})
</script>
<body>

用户名 :
<input type="text" name="userName" id="userName">
<span id="checkUN"></span>

</body>
</html>


checkUser.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String name = request.getParameter("name");

if (name.trim().equals("cong")) {
out.print(1);
} else if (name.trim().equals("")) {
out.print(2);
} else {
out.print(3);
}
%>


这是简单版的，就是2个jsp页面，ajax的url提交到checkUser.jsp页面处理,代码很好理解，就不写注解了。。。

运行——



当文本框失去焦点时，js脚本执行，ajax 提交到checkUser.jsp 页面。check.jsp判断处理 out.print(1) . ajax成功返回数据 1，把 data=1 传入function ine(data) 进行判断处理。这是简单版没有连接mysql数据库。。。

———————————Spring +jquery+ajax—–Start——————-

register.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR
4000
/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CheckUser</title>
</head>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function ine(data) {

if (data == 1) {
document.getElementById("checkUN").innerHTML = "<b style='color: red'>用户名已存在</b>";
} else if (data == 2) {
document.getElementById("checkUN").innerHTML = "<b style='color:red'>不能为空</b>";
} else if (data == 3) {
document.getElementById("checkUN").innerHTML = "<b style='color:green'>该用户名可用</b>"
} else if (data == 0) {
document.getElementById("checkUN").innerHTML = "<b style='color:red'>ajax成功返回值为空</b>"
} else {
document.getElementById("checkUN").innerHTML = "<b style='color:red'>未知错误</b>"
}
}

function checkUser() {
var name = $('#userName').val();
var s = 0;
$.ajax({
type : "post",
url : '${pageContext.request.contextPath}/user/checkUser.action',
data : "name=" + name,
success : function(data) {
ine(data);
}
});

}

$(document).ready(function() {
$("#userName").blur(function() {
checkUser();
});
})
</script>
<body>

用户名 :
<input type="text" name="userName" id="userName">
<span id="checkUN"></span>

</body>
</html>


关键是 ‘${pageContext.request.contextPath}/user/checkUser.action’ 这里提交的路径不同

UserController.java

package com.dy.nygl.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.Resource;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.jasper.tagplugins.jstl.core.Out;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.dy.nygl.pojo.User;
import com.dy.nygl.service.UserService;

@Controller
@RequestMapping("/user")
public class UserController {

@Resource(name = "userService")
private UserService userService;

@RequestMapping(value = "checkUser.action", method = { RequestMethod.POST })
public void checkUser(HttpServletRequest request, HttpServletResponse response, HttpSession session)
throws ServletException, IOException {

PrintWriter out = response.getWriter();
String name = request.getParameter("name");
if (name.trim().equals("")) {
out.print(2);// 2是不能为空
} else {
User user = userService.checkUser(name);
if (user != null) {
out.print(1);// 1用户名已存在F
} else {
out.print(3);// 用户名可以用
}
}
}
}


这是Controller层



UserServiceImpl.java

package com.dy.nygl.service.impl;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.dy.nygl.mapper.UserMapper;
import com.dy.nygl.pojo.User;
import com.dy.nygl.service.UserService;

@Service("userService")
public class UserServiceImpl implements UserService {

@Resource(name = "userDao")
private UserMapper userDao;

@Override
public User checkUser(String account) {
System.out.println("checkUser--------->");
User user = userDao.selectUserByAccount(account);
if (user != null) {
System.out.println("getUser:" + user);
return user;
} else {
System.out.println("user为空");
}
return null;
}
}


Service层



运行—



SpringMvc就是Console控制台的log比较多，不过更详细知道程序的运行状态

好了，不吹了，代码量比较大，需要详细了解的程序员朋友们可以下载源码，这是我现在常用的一个完整的SpringMvc框架上写的，SpringMvc可完美运行，源码中有具体jquery ajax 实现文本框失去焦点检测用户名是否存在的代码。。。

SpringMvc完美框架：源码下载 springmvc+jquery+ajax

QQ : 1099749430

欢迎程序员朋友加我QQ,一起技术交流，共同进步！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航