springMVC实现处理ajax请求

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;
	}
}
成功后会在注册表单下方显示注册的数据。
  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值