springMVC学习记录——处理ajax请求

最新推荐文章于 2022-11-05 00:10:47 发布

C_Liao

最新推荐文章于 2022-11-05 00:10:47 发布

阅读量367

点赞数

CC 4.0 BY-SA版权

分类专栏： springMVC 文章标签： springMVC ajax

本文链接：https://blog.youkuaiyun.com/ex_tang/article/details/82962451

springMVC 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在SpringMVC框架中使用response输出请求处理数据，并通过AJAX进行前后端数据交互，包括解决中文乱码问题、使用@ResponseBody注解将Map转换为Json对象返回，以及必要的依赖配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用response输出请求处理数据，响应请求：

控制器中的处理方法：

@RequestMapping(value="getValue3.action")
public void getValue3(LsjmUser user, HttpServletResponse response)
{
        // 设置reponse编码和响应头编码格式， 防止中文乱码
        response.setCharacterEncoding("utf-8");
	response.setContentType("text/html;charset=utf-8");
	// 可以自己组装json字符串, 也可以用fastjson转换
        Map<String,String> result = new HashMap<String, String>();
	result.put("result", "成功");
	String resultStr = JSON.toJSONString(result);
	//String resultStr = "{\"result\":\"chaol\"}";
	PrintWriter pw = null;
	try {
		pw = response.getWriter();
		pw.write(resultStr);
		pw.flush();
	} catch (Exception e) {
		e.printStackTrace();
	} finally{
		pw.close();
	}
}

前台页面及 js 代码（首先记得要引入jquery）：

<form method="post" id="myform">
	<input type="text" id="uname" name="uname" />
	<input type="text" id="pwd" name="pwd" />
	<input type="submit" value="提交" />
</form>

<script>
	$(document).ready(function(){
		var unameInput = $("#uname");
                // input元素失去焦点后触发
		unameInput.blur(function(){
			//console.info(unameInput.val())
			$.ajax({
				url:"user/getValue3.action",
				type:"post",
				data:{"uname":unameInput.val()},
				datatype:"json",
				success:function(data){
					console.info("success");	
					console.info(JSON.parse(data).result);  //成功
				},
				error:function(){
					console.info("error")
				}
			})
		})
	})
</script>

2、springMVC中对ajax的支持

使用 @ResponseBody将方法的返回类型 Map 或者 List 转换成一个Json对象返回给用户界面

前提条件：导入三个jar：

<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-core</artifactId>
	<version>2.6.0</version>
</dependency>
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-annotations</artifactId>
	<version>2.6.0</version>
</dependency>
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.6.0</version>
</dependency>

控制器中的处理方法：

@ResponseBody  //将Map、List转换成Json对象返回
@RequestMapping(value="ajaxDemo.action")
public Map<String, String> ajaxDemo(LsjmUser user)
{
	// 可处理中文乱码问题
        Map<String, String> result = new HashMap<String, String>();
	result.put("result", "成功");
	result.put("uname", user.getUname());
	return result;
}

前台页面及 js 代码（首先记得要引入jquery）：

<form method="post" id="myform">
	<input type="text" id="uname" name="uname" />
	<input type="text" id="pwd" name="pwd" />
	<input type="button" value="提交" onclick="commit()" />
</form>

<script>
	function commit(){
			$.ajax({
				url:"user/ajaxDemo.action",
				type:"post",
				data:{"uname":$("#uname").val(), "pwd": $("pwd").val()},
				datatype:"json",
				success:function(data){
					console.info(JSON.stringify(data));  //{"result":"成功","uname":"chaol"}
				},
				error:function(){
					console.info("error")
				}
			})
		}
</script>