springMVC实现处理ajax请求

最新推荐文章于 2024-09-20 18:15:48 发布

原创最新推荐文章于 2024-09-20 18:15:48 发布 · 8.8k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#springMVC #处理ajax请求 #jackson-all #对象转换为json

springMVC注解专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个SSM项目中使用Ajax提交表单的方法，包括配置文件设置、页面JS编写及Controller层处理。

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;
	}
}

成功后会在注册表单下方显示注册的数据。