ssm项目经常会使用到ajax提交表单,controller层来接收和处理ajax请求并且回传一个对象,下面实现一个简单的处理ajax请求的功能。
一、项目要求
jsp页面提供注册功能,利用ajax提交表单,controller实现回传一个对象,在注册页面显示注册的信息。
二、说明
springMVC用的是注解
三、具体过程
(1)导入jar包
jar包:jackson-all-1.9.11.jar
WEB开发中处理json的jar包,我的版本比较老了,可以去官网下较新的版本。
(2)xxxx-servlet.xml配置文件
主要添加“从请求和响应读写/编写字符串”和“将对象转换为json”两项配置,其他都是基本的配置。
<?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:mvc="http://www.springframework.org/schema/mvc"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
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/aop
http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<mvc:annotation-driven/><!-- 驱动声明,2.0以上版本可以省略 -->
<context:component-scan base-package="com.hfxt.controller"></context:component-scan>
<!-- 配置视图解析器 如何把handler 方法返回值解析为实际的物理视图 根据控制器返回的字符串拼接成jsp路径:/WEB-INF/page/xx.jsp -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/page/"/><!-- 前缀 -->
<property name="suffix" value=".jsp"/><!-- 后缀 -->
</bean>
<!-- 从请求和响应读取/编写字符串 -->
<bean id="stringConverter"
class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/plain;charset=UTF-8</value>
</list>
</property>
</bean>
<!-- 用于将对象转换为 JSON -->
<bean id="jsonConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"></bean>
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="stringConverter" />
<ref bean="jsonConverter" />
</list>
</property>
</bean>
<mvc:resources location="/js/" mapping="/js/**"/><!-- js文件不提交给服务器 -->
</beans>
(3)register.jsp页面的js写表单ajax提交
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>注册用户</title>
<script type="text/javascript" src="/spring_mvc_annotation/js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("#button").click(function(){
var url="/spring_mvc_annotation/registerUser";
$.post(
url,
{
username:$("#uname").val(),
password:$("#pwd").val()
},
function(data){
$("#mydiv").html("<p>"+data.username+"***"+data.password+"<p>");
}
);
});
});
</script>
</head>
<body>
<form id="myForm" action="/spring_mvc_annotation/registerUser" method="post">
用户名:<input type="text" id="uname" name="username" /><br />
密码:<input type="password" id="pwd" name="password" /><br />
<input type="button" value="注册" id="button"/>
</form>
<div style="color: red;" id="mydiv"></div>
</body>
</html>
(4)controller层处理
package com.hfxt.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.hfxt.entity.User;
@Controller
@RequestMapping(value="/")
public class LoginController {
//ajax请求,返回一个对象
@RequestMapping(value="/registerUser",method=RequestMethod.POST)
public @ResponseBody User registerUser(String username,String password){ //返回对象添加@ResponseBody标签
//访问数据库或处理数据的代码,这里只是简单做个处理
User user=new User();
if(username!=null){
user.setUsername(username);
}
if(password!=null){
user.setPassword(password);
}
return user;
}
}
成功后会在注册表单下方显示注册的数据。