力所能及之springmvc+ajax+jquery+json實現登入非同步校驗使用者名稱是否存在
阿新 • • 發佈：2019-02-18
小狼最近在想能不能用springmvc實現後臺非同步校驗
開發環境：windows7純淨版 myeclipse8.6 jquery-1.3.2
需要jar檔案 ：
工程目錄： 、
各類配置檔案配置：
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>springMVC</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springMVC</servlet-name> <url-pattern>*.zcy</url-pattern> </servlet-mapping> </web-app>
springMVC-servlet.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd"> <context:component-scan base-package="qh.zcy.controller" /> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:prefix="/"></bean> </beans>
login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</title> </head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <!--<script type="text/javascript" src="js/json2.js"></script> --><script type="text/javascript"> $(function(){ $("#username").mouseleave(function(){ var username=$("#username").val(); if(username==""){ $("#msg").html("使用者名稱不為空"); return ; } $.post("login.zcy", { username: username }, function(data){ $("#msg").html(data); }); $("#password").click(function(){ $("#msg").html(null); }) }); }); </script> <body> <form action="" method="post" > username:<input type="text" name="username" id="username"><br/> password:<input type="text" name="password" id="password"><br> <input type="submit" value="submit"> <div id="msg"></div> </form> </body> </html>
Login.java
package qh.zcy.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class Login {
@RequestMapping("/login")
public String login(String username,HttpServletResponse response){
System.out.println("Login username="+username);
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out=null;
try {
out=response.getWriter();
if(username.equals("admin")){
out.println("此使用者名稱已存在");
}else{
out.println("此使用者名稱可以使用");
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
輸入路徑：http://localhost:8080/spring2/login.jsp
什麼都不填，顯示如下：
輸入使用者名稱為admin，顯示如下：
輸入使用者名稱為其他，顯示如下：
小狼現在只想說ok