zoukankan      html  css  js  c++  java
  • Spring3 MVC 使用JSON进行前后台数据交互

    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

  • 相关阅读:
    简单粗暴,微生物生态研究中常用数据库简介--转载
    sliva数据库简介--转载
    DriverDBv2---人类肿瘤driver基因数据库
    lncrnablog
    胞外囊泡与外泌体数据库--转载
    Oncomine: 一个肿瘤相关基因研究的数据库--转载
    circRNA研究手册
    常用Gene ID转换工具--转载
    miRNA几大常用的数据库
    zk使用通知移除节点
  • 原文地址:https://www.cnblogs.com/fx2008/p/3591499.html
Copyright © 2011-2022 走看看