spring mvc 与 jquery ajax
2024-08-25 01:53:46
在 Spring mvc3中,响应、接受 JSON都十分方便。
使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON。
使用 @RequestBody 注解前台只需要向 Controller 提交一段符合格式的 JSON,Spring 会自动将其拼装成 bean。
Spring这个转换是靠org.codehaus.jackson这个组件来实现的,所有需要引入jackson-core-asl和org.codehaus.jackson两个jar包
<title>Spring MVC</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/user/index.js"></script>
</head>
<body>
<div id="info"></div>
<form action="add" method="post" id="form">
编号:<input type="text" name="id"/>
姓名:<input type="text" name="username"/>
年龄:<input type="text" name="age"/> <input type="button" value="提交" id="submit"/>
</form>
</body>
</html>
html文件路径:.../webapp/views/index.html
//将一个表单的数据返回成JSON对象
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}; $(document).ready(
function() {
jQuery.ajax( {
type : 'GET',
contentType : 'application/json',
url : 'user/list',
dataType : 'json',
success : function(data) {
if (data && data.success == "true") {
$('#info').html("共" + data.total + "条数据。<br/>");
$.each(data.data, function(i, item) {
$('#info').append(
"编号:" + item.id + ",姓名:" + item.username
+ ",年龄:" + item.age);
});
}
},
error : function() {
alert("error")
}
});
$("#submit").click(function() {
var jsonuserinfo = $.toJSON($('#form').serializeObject());
alert(jsonuserinfo);
jQuery.ajax( {
type : 'POST',
contentType : 'application/json',
url : 'user/add',
data : jsonuserinfo,
dataType : 'json',
success : function(data) {
alert("新增成功!");
},
error : function(data) {
alert("error")
}
});
});
});
@Controller
@RequestMapping("/user")
public class DemoController {
private Logger logger = LoggerFactory.getLogger(DemoController.class); @RequestMapping(value = "/list", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> getUserList() {
logger.info("列表");
List<UserModel> list = new ArrayList<UserModel>();
UserModel um = new UserModel();
um.setId("");
um.setUsername("sss");
um.setAge();
list.add(um);
Map<String, Object> modelMap = new HashMap<String, Object>();
modelMap.put("total", "");
modelMap.put("data", list);
modelMap.put("success", "true");
return modelMap;
} @RequestMapping(value = "/add", method = RequestMethod.POST)
@ResponseBody
public Map<String, String> addUser(@RequestBody UserModel model) {
logger.info("新增");
logger.info("捕获到前台传递过来的Model,名称为:" + model.getUsername());
Map<String, String> map = new HashMap<String, String>();
map.put("success", "true");
return map;
}
}
另外一种参数传递方式
前端代码:
$.ajax({type : "POST",
url : "assign.v",
data : {
userId : userId,
'add[]' : [,,],
'del[]' :[]
},
success : function (data){
searchWidget.searchUser();
}
});
后端代码:
@ResponseBody
@RequestMapping(value="/assign",
method=RequestMethod.POST)
public String assign(
@RequestParam(value="userId", required=true) int userId,
@RequestParam(value="add[]", required=false) int[] add,
@RequestParam(value="del[]", required=false) int[] del) {
System.out.println("userId:" + userId);
System.out.println("add:" + add);
System.out.println("del:" + del);
return "";
}
最新文章
- SpringMVC 自定义一个拦截器
- 正则匹配中 ^ $ 和 \b 的区别
- jquery 时间控件怎么能禁止输入只能选择日期?
- uboot中添加FIQ中断及相关问题
- django rest framework csrf failed csrf token missing or incorrect
- Github 与Git pages
- 多线程监控文件夹,FlieSystemWatcher,并使用共享函数
- python测试基于websocket协议的即时通讯接口
- phpstorm 配置
- openwrt l7过滤qos配置
- (转)Eclipse快捷键 10个最有用的快捷键
- LeetCode 283. Move Zeroes (移动零)
- laravel whereDate()方法的使用
- [Linux]使用awk批量杀进程的命令
- R语言查看栅格值
- js获取子元素的内容
- linux 下端口close_wait 过多问题
- js转换数据格式为货币格式
- linux 上传下载 以及SCP命令
- SpringMVC与SiteMesh
热门文章
- Arcengine 开发,FeatureClass新增feature时“The Geometry has no z-value”或";The Geometry has null z-value";的解决方案
- orcad10.5启动加速
- TextView textSize 文字大小
- Linux学习:find、chmod、ps命令
- 数据切分——MySql表分区概述
- iOS中的图像处理(一)——基础滤镜
- [Swust OJ 217]--Factor(数论,类素数表)
- BZOJ 1978: [BeiJing2010]取数游戏 game( dp )
- 翻页采用jaxa
- php上传文件,创建递归目录