springMVC中Ajax的一个demo

##先创建一个Maven项目，配置好maven依赖。
###用户注册前端jsp代码:

<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#bt1").on("click",function(){
			$.ajax({
				url:"<%=request.getContextPath() %>/handle_reg.do",
				type:"post",
				data:{"username":$("#username").val(),"phone":$("#phone").val(),"pwd":$("#pwd").val()},
				success:function(user){
					alert(user);
					$("#td1").text(user.username);
					$("#td2").text(user.phone);
					$("#td3").text(user.pwd);								
				},
				error:function(msg){
					alert("进入了error方法...");
				}
				
			});
		});
	})	
</script>
</head>
<body>
	<form  id="form_reg">
		<fieldset>
		<legend>用户注册</legend>
		用户名:<input type="text" name="username" id="username"><br/>
		手机号:<input type="text" name="phone" id="phone"><br/>
		密&nbsp;&nbsp;码:<input type="password" name="pwd" id="pwd"><br/>
		<input type="button" id="bt1" value="注册">
		</fieldset>
	</form>
	<table border=1 cellspacing="0" cellpadding="0">
		<tr><td>用户名</td><td>电话</td><td>密码</td></tr>
		<tr><td id="td1"></td><td id="td2"></td><td id="td3"></td></tr>
	</table>

##User控制器代码:

@Controller
public class UserController {

@RequestMapping("reg.do")
public String reg(){
	return "reg";
}
@RequestMapping("handle_reg.do")
@ResponseBody
public User handle_reg(String username,String phone,String pwd){
	System.out.println(username+","+phone+","+pwd);
	User user = new User(username,phone,pwd);
	return user;
}

}
##创建一个User类，存储用户信息，注意要有属性的get，set方法；


public class User {
	private String username;
	private String phone;
	private String pwd;
	public User(String username, String phone, String pwd) {
		super();
		this.username = username;
		this.phone = phone;
		this.pwd = pwd;
	}
	@Override
	public String toString() {
		return "User [username=" + username + ", phone=" + phone + ", pwd=" + pwd + "]";
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	
}
###MAVEN依赖：

###SPRING-MVC.XML中的配置增加注解驱动：

	<dependencies>
		<!--springmvc框架依赖 -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>4.3.9.RELEASE</version>
		</dependency>
		<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.12</version>
        </dependency>		
	</dependencies>

<!--注解驱动  -->
	<mvc:annotation-driven>
		<mvc:message-converters register-defaults="true">
			<!-- @ResponseBody乱码问题，将StringHttpMessageConverter的默认编码设为UTF-8 -->
			<bean class="org.springframework.http.converter.StringHttpMessageConverter">
				<constructor-arg value="UTF-8" />
			</bean>
			<!-- 配置Fastjson支持 -->
			<bean
				class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
				<property name="charset" value="UTF-8" />
				<property name="supportedMediaTypes">
					<list>
						<value>application/json</value>
						<value>text/html;charset=UTF-8</value>
					</list>
				</property>
			</bean>
		</mvc:message-converters>
	</mvc:annotation-driven>

###以下是执行结果: 在这里插入图片描述

springMVC中Ajax的一个demo

猜你喜欢