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

来源：互联网发布：扫描文件编辑软件编辑：程序博客网时间：2024/04/30 00:00

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

话不多说，直接上代码

<%@ 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——————-

<%@ 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层

运行—
eclipese---img4.jsp

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

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

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

QQ : 1099749430
欢迎程序员朋友加我QQ,一起技术交流，共同进步！

0 0