您的位置:首页 > Web前端 > JQuery

Spring3.1 MVC和jQuery ajax的集成

2013-12-17 21:19 363 查看
       关于spring和ajax的集成网上有很多文章,但有些文章写的有些复杂,贴了好多代码,有用的、没用的、不疼不痒的贴了一堆,看着不够清爽,又容易把人吓到。在翻了好多资料后,看到这篇文章《Spring3MVC和jQuery的集成》,博主写的很详细,还做了对比分析,让人佩服。在参考这篇文章后,我终于搞明白了、搞定了spring集成ajax,可以实现异步刷新了。上文博主讲的很详细,我结合自己的小程序再随便说两句。
       spring3.1集成jquery ajax时,配置文件不需要在添加什么新内容。网上有的资料说在配置文件中要添加ContentNegotiatingViewResolver和MappingJacksonJsonView等等bean,经过试验,发现不再需要这些配置了,我基于注解的spring配置,视图解析部分就是最简单、最简洁的配置。
       先下载两个jar文件,jackson-mapper-asl.jar和jackson-core-asl.jar,然后添加到项目。
       假设要实现ajax功能的为网页上非常常见的"喜欢按钮","喜欢按钮"代码为:
......
<a class="button white" id="NumBtn">喜欢~<span id="num">${ num }人</span></a>
......

注意上述代码中是没有href这货的,我开始思维定式的加了href并在href后加了相应操作链接,结果可想而知,测试时每次点按钮都是全部刷新。下面是与点击"喜欢按钮"相对应的jquery代码,get()方法与服务器端method
= RequestMethod.GET相对应,代码很短,很容易理解。data即为从服务器端返回的数据。
<script type="text/javascript">
$("#NumBtn").click(
function(){
$.get("<c:url value="/product/${product.productId}/xxx"/>",
function(data){
$("#num").replaceWith('<span id="num">'+ data + '人</span>');
});
});
</script>

服务器端代码为:
@RequestMapping(value = "/product/{productId}/xxx", method = RequestMethod.GET)
public @ResponseBody String num(HttpServletRequest request, @PathVariable("productId") long productId)
{
Integer num = 0;

......
......

return num.toString();
}

       因为要实现的功能简单,所以代码也很少,但一旦搞明白这个流程,那就可以进一步做扩展,以设计、实现更复杂的功能。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: