地图集web项目_技术学习(一)_前后端数据传输(ajax)

本文涉及的产品
数据传输服务 DTS,数据迁移 small 3个月
推荐场景:
MySQL数据库上云
数据传输服务 DTS,数据同步 small 3个月
推荐场景:
数据库上云
数据传输服务 DTS,数据同步 1个月
简介: 地图集web项目_技术学习(一)_前后端数据传输(ajax)

之间经历的一些弯路和众多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<Test> 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<LangRes> 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”}

如果去掉这句话,后端在前端返回的数据中如果出现中文,就会无法显示,刚开始以为是前端的问题,请教了师兄后,发现是后端传输数据的问题,简单来说照我这样写就好,详解请看:

解决springMVC4下使用@ResponseBody的中文乱码问题


AIEarth是一个由众多领域内专家博主共同打造的学术平台,旨在建设一个拥抱智慧未来的学术殿堂!【平台地址:https://devpress.csdn.net/aiearth】 很高兴认识你!加入我们共同进步!

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
Sqoop 企业级大数据迁移方案实战
Sqoop是一个用于在Hadoop和关系数据库服务器之间传输数据的工具。它用于从关系数据库(如MySQL,Oracle)导入数据到Hadoop HDFS,并从Hadoop文件系统导出到关系数据库。 本课程主要讲解了Sqoop的设计思想及原理、部署安装及配置、详细具体的使用方法技巧与实操案例、企业级任务管理等。结合日常工作实践,培养解决实际问题的能力。本课程由黑马程序员提供。
目录
相关文章
|
11天前
|
JSON 前端开发 JavaScript
java-ajax技术详解!!!
本文介绍了Ajax技术及其工作原理,包括其核心XMLHttpRequest对象的属性和方法。Ajax通过异步通信技术,实现在不重新加载整个页面的情况下更新部分网页内容。文章还详细描述了使用原生JavaScript实现Ajax的基本步骤,以及利用jQuery简化Ajax操作的方法。最后,介绍了JSON作为轻量级数据交换格式在Ajax应用中的使用,包括Java中JSON与对象的相互转换。
25 1
|
1月前
|
机器学习/深度学习 移动开发 JavaScript
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
126 0
|
1月前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
在Web开发领域,AJAX与Fetch API是提升交互体验的关键技术。AJAX(Asynchronous JavaScript and XML)作为异步通信的先驱,通过XMLHttpRequest对象实现了局部页面更新,提升了应用流畅度。Fetch API则以更现代、简洁的方式处理HTTP请求,基于Promises提供了丰富的功能。当与Python Web框架(如Django、Flask)结合时,这两者能显著增强应用的响应速度和用户体验,使项目更加高效、高大上。
50 2
|
30天前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
15 0
|
1月前
|
网络协议 API 网络安全
Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
138 0
|
1月前
|
网络协议 安全 JavaScript
Web实时通信的学习之旅:WebSocket入门指南及示例演示
Web实时通信的学习之旅:WebSocket入门指南及示例演示
124 0
|
1月前
|
监控 Java Maven
springboot学习二:springboot 初创建 web 项目、修改banner、热部署插件、切换运行环境、springboot参数配置,打包项目并测试成功
这篇文章介绍了如何快速创建Spring Boot项目,包括项目的初始化、结构、打包部署、修改启动Banner、热部署、环境切换和参数配置等基础操作。
123 0
|
1月前
|
前端开发 JavaScript API
告别繁琐!AJAX与Fetch API,让你的前后端沟通畅通无阻,项目效率飙升!
在Web开发中,前后端的顺畅沟通至关重要。传统方法常需频繁刷新页面,影响体验与效率。AJAX和Fetch API的出现简化了这一过程。AJAX利用XMLHttpRequest实现局部页面更新,提升用户体验;Fetch API则以更简洁的语法和强大的功能,进一步优化异步请求处理。两者均能显著提高开发效率,简化代码结构,让项目迭代更快速。拥抱这些技术,让Web开发之路更加顺畅。
26 0
|
3月前
|
前端开发 Java UED
告别页面刷新时代:Struts 2 Ajax技术揭秘,轻松实现动态加载,Web应用焕然一新!
【8月更文挑战第31天】在Web应用开发中,用户体验至关重要。为减少页面刷新带来的不适,Ajax技术应运而生。Struts 2作为流行的Java EE框架,通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式,展示了Struts 2如何轻松实现Ajax功能,提升了用户体验和开发效率,并灵活地实现了数据交换。然而,使用Ajax时还需注意SEO和跨域请求等局限性。
41 0
|
4月前
|
JSON 中间件 数据处理
实践出真知:通过项目学习Python Web框架的路由与中间件设计
【7月更文挑战第19天】探索Python Web开发,掌握Flask或Django的关键在于理解路由和中间件。路由连接URL与功能,如Flask中@app.route()定义请求响应路径。中间件在请求处理前后执行,提供扩展功能,如日志、认证。通过实践项目,不仅学习理论,还能提升构建高效Web应用的能力。示例代码展示路由定义及模拟中间件行为,强调动手实践的重要性。
56 1