首页 > 程序开发 > 综合编程 > 其他综合 >

地图集web项目:前后端数据传输

2017-10-07

地图集web项目_技术学习:前后端数据传输。之间经历的一些弯路和众多bug就不说了,直接解释代码吧

之间经历的一些弯路和众多bug就不说了,直接解释代码吧:
第一个前后端数据交互:

//jsp页面的ajax函数
        array.push(11);
        array.push(12);
        array.push(13);
        array.push(14);
        $.ajax({
            type : 'POST',
            url: 'getmarks.action',//请求对应的url(controller)
            contentType : 'application/json;charset=UTF-8',
            data : JSON.stringify(array),//接收数据到data
            dataType: "json",//设置请求返回的数据格式为json
            success : function(data) {
                console.info(data);//控制台输出data
            }
        });
//后端controller
    @RequestMapping(path = "/getall.action", produces = {"application/json;charset=UTF-8"})  
    @ResponseBody//根据前端要求返回的数据格式自动进行转换
        public String testPost() throws IOException {
        List testList = this.testService.getTestList();
        System.out.println(testList);
        return JSON.toJSONString(testList);//返回给前端数据
    }

对于@ResponseBody的详解:
SPRINGMVC注解之@RESPONSEBODY和@REQUESTBODY详解

第二个前后端数据交互:

//得到每页显示条数
        var pageSize = $("#pageSize").val();
        //得到显示第几页
        var pageNum = $("#pageNum").val();

        $.ajax({
            type: "POST",
            async: false,
            url: "http://localhost:8080/assurance/pager",
            data: {
                "pageSize": pageSize,
                "pageNo": pageNum
            },
            dataType: "json",
            success: function (data) {
                   console.info(data);
            }
//后端controller
//这是一个分页,后端设置好后可以自动对page对象中的pageSize,pageNo赋值
@RequestMapping(value={"/pager"},produces = {"application/json;charset=UTF-8"})
    @ResponseBody
    public Page selectByExample(Page page, LangRes langRes, Model model){
        System.out.println(page);
        model.addAttribute("langRes",langRes);
        LangResExample example = new LangResExample();
        LangResExample.Criteria c = example.createCriteria();
        if(langRes.getId()!=null){
            c.andIdEqualTo(langRes.getId());
        }
        if(langRes.getName()!=null){
            c.andNameEqualTo(langRes.getName());
        }
        if(langRes.getAudioName()!=null){
            c.andAudioNameEqualTo(langRes.getAudioName());
        }
        if(langRes.getVideoName()!=null){
            c.andVideoNameEqualTo(langRes.getVideoName());
        }
        if(langRes.getComment()!=null){
            c.andCommentEqualTo(langRes.getComment());
        }
        if(langRes.getPronunciation()!=null){
            c.andPronunciationEqualTo(langRes.getPronunciation());
        }
        if(langRes.getCatalog()!=null){
            c.andCatalogEqualTo(langRes.getCatalog());
        }
        if(langRes.getSpeaker()!=null){
            c.andSpeakerEqualTo(langRes.getSpeaker());
        }
        if (langRes.getDetailsId()!=null){
            c.andDetailsIdEqualTo(langRes.getDetailsId());
        }
        example.setOrderByClause(page.getPageSorts());
        return assuranceService.selectByExample(example, page);
    }

当然还有一个问题:
produces = {“application/json;charset=UTF-8”}
如果去掉这句话,后端在前端返回的数据中如果出现中文,就会无法显示,刚开始以为是前端的问题,请教了师兄后,发现是后端传输数据的问题,简单来说照我这样写就好

相关文章
最新文章
热点推荐