首先需要加入三个jar包，SpringMVC的版本是4.1，这三个包可以用，如果是其他版本的SpringMVC可能不管用，需要换其他版本的这三个jar包
每输入一个字符就使用ajax请求一个url
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>SpringMVC</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#username").keyup(function(){
var username=$(this).val();
$.ajax({
type:"post",
url:"hello.do",
async:false,
data:{
"username":username
},
success:function(data){
$.each(data,function(index,item){
if (item.flag){
$("#unTip").text("用户名可以使用").css({"color":"green"});
}else {
$("#unTip").text("用户名已存在 ").css({"color":"red"});
}
});
},
error:function(){
alert("网络错误请稍后重试");
}
});
});
$("#confirmPassword,#password").keyup(function(){
var password=$("#password").val();
var confirmPassword=$("#confirmPassword").val();
if (password==confirmPassword){
$("#cpTip").text("两次密码相同 ").css({"color":"green"});
}else {
$("#cpTip").text("两次密码不同 ").css({"color":"red"});
}
});
});
</script>
</head>
<body>
<div align="center">
<form>
<table>
<tr>
<td><label>用户名: <input type="text" id="username" autocomplete="off"/></label></td>
<td id="unTip"> </td>
</tr>
<tr>
<td><label>密 码:<input type="password" id="password"/></label></td>
<td></td>
</tr>
<tr>
<td><label>确认密码:<input type="password" id="confirmPassword"/></label></td>
<td id="cpTip"> </td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>web.xml需要加入的配置
<servlet>
<servlet-name>SpringMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>springmvc-servlet.xml的配置
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">
<mvc:default-servlet-handler />
<context:component-scan base-package="com.controller"/>
<mvc:annotation-driven />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
id="internalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>控制器的代码，与ajax交互的控制器的类需要加入@ResponseBody，类的返回值就是需要传递的json数据
package com.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class testSpringMVCAjax {
@RequestMapping(value="hello.do")
@ResponseBody
public List<Map<String, Object>> testJson(String username){
List<Map<String, Object>> list=new ArrayList<>();
Map<String, Object> map=new HashMap<>();
boolean flag=true;
String message="用户名可以使用";
if(username.equals("muchengxiang")) {
flag=false;
message="用户名已存在";
}
map.put("flag", flag);
map.put("message", message);
list.add(map);
return list;
}
}
4566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
