springmvc 使用json交互数据 (ajax)

最新推荐文章于 2018-12-25 08:43:18 发布

原创最新推荐文章于 2018-12-25 08:43:18 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#springmvc ajax

springmvc 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用SpringMVC框架实现的简单JSON交互示例。示例中包括了一个后端控制器StoreQueryAction，该控制器通过@RequestBody接收前端发送的JSON格式的数据，并通过@ResponseBody返回处理后的JSON响应。此外，还提供了一个前端页面，该页面使用jQuery发起AJAX请求与后端进行通信。

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

spirngmvc默认使用的是MappingjacksonHttpMessageConverter对json数据进行转换，需要加入

jackson-core-asl.jar

jackson-mapper-asl.jar

jackson-databind.jar

jackson-core.jar

jackson-annotations.jar

然后使用@RequestBody @ResponseBody这两个注解。

public class StoreQueryAction {

	/**
	 * 提交登陆页面
	 * @param i
	 * @return
	 * @throws Exception
	 */
	@RequestMapping("/login")
	public @ResponseBody Map<String, String> login(String username, String password) throws Exception {
		// TODO Auto-generated method stub	
		
		Map<String, String> map = new HashMap<String, String>();	
		map.put("code", "haha");
		map.put("enen", "发发");
		
		return map;
	}

	
}

前台页面

<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>乌云后台登录</title>
<!-- Custom Theme files -->
<link href="css/loginstyle.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Custom Theme files -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="后台登录" />

<script type="text/javascript" src="js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	function login() {
		var userdata = {
            "username":$("#username").val(),
            "password":$("#password").val()};
		$.ajax({
			url : "login.do",
			method : "post",
			dataType : "json",
			data : {"username":"ssss", "password":"ccccc"},
			success : function(data){
				var d = JSON.stringify(data);
				if (d.code == "100") {
					window.location.href = "jsp/main.jsp";
				}else{
					var msg = d.msg;
					document.getElementById("error").innerHTML = msg;
				}
			}
		});
	
	}
</script>

</head>
<body>
<!--header start here-->
<div class="login-form">
			<div class="top-login">
				<span><img src="img/group.png" alt=""/></span>
			</div>
			<h1>塔南店信息查系统</h1>
			<div class="login-top">
			<form>
				<div class="login-ic">
					<i ></i>
					<input type="text" id="username" value="用户" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'User name';}"/>
					<div class="clear"> </div>
				</div>
				<div class="login-ic">
					<i class="icon"></i>
					<input type="password" id="password" value="密码" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'password';}"/>
					<div class="clear"> </div>
				</div>
			
				<div class="log-bwn">
					<input type="submit" value="Login" onclick="login()">
				</div>
				</form>
				<div id="error"></div>
			</div>

</div>		
<!--header start here-->
</body>
</html>