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/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,一起技術交流，共同進步！