您的位置: 首页  >  IT文章  >  Spring3 MVC 使用JSON进行前后台数据交互

Spring3 MVC 使用JSON进行前后台数据交互

分类: IT文章 • 2023-10-27 09:43:56

http://wbj0110.iteye.com/blog/2007918

在 Spring3 中，响应、接受 JSON都十分方便。
向前台返回 JSON 格式的数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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("1");
    um.setUsername("sss");
    um.setAge(222);
    list.add(um);
    Map<String, Object> modelMap = new     HashMap<String, Object>(3);
    modelMap.put("total", "1");
    modelMap.put("data", list);
    modelMap.put("success", "true");
    return modelMap;
}

使用注解@ResponseBody可以将结果（一个包含字符串和JavaBean的Map），转换成JSON。
Spring这个转换是靠org.codehaus.jackson这个组件来实现的，所有需要引入jackson-core-asl和org.codehaus.jackson两个jar包，并且在web.xml中配置：

1
2
3
4
5
6
7
8
9
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
    <property name="messageConverters">
        <util:list id="beanList">
            <ref bean="mappingJacksonHttpMessageConverter" />
        </util:list>
    </property>
</bean>
 
<bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />


在Controller中接受参数也非常简单：

1
2
3
4
5
6
7
8
9
10
11
@RequestMapping(value="/{id}",method=RequestMethod.GET)
@ResponseBody
public UserModel getUserById(@PathVariable String id)
{
    logger.info("取值");
    UserModel um = new UserModel();
    um.setId(id);
    um.setUsername("sss");
    um.setAge(222);
    return um;
}

这样，可以访问类似于 http://localhost:8080/demo/user/1.do 来获取 id 为 1 的用户数据。

另外，在前台表单中向后台提交数据也非常方便：

1
2
3
4
5
6
7
8
9
10
@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>(1);
    map.put("success", "true");
    return map;
}

使用 @RequestBody 注解前台只需要向 Controller 提交一段符合格式的 JSON，Spring 会自动将其拼装成 bean。

这样，Controller可以返回给前台JSON，也可以接收JSON。
而在前台，我们可以用 jQuery 来处理 JSON。
从这里，我得到了一个 jQuery 的插件，可以将一个表单的数据返回成JSON对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.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;
};

以下是使用 jQuery 接收、发送 JSON 的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
 * @author liuweifeng
 */
$(document).ready(function(){
    jQuery.ajax({
        type: 'GET',
        contentType: 'application/json',
        url: 'list.do',
        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: 'add.do',
            data: jsonuserinfo,
            dataType: 'json',
            success: function(data){
                alert("新增成功！");
            },
            error: function(){
                alert("error")
            }
        });
    });
});

代码下载：http://www.box.net/shared/ia6qht3hfu

相关推荐