利用ajax获取后端数据存放入前端(.html文件)页面<td></td>中
时间:2020-04-28
本文章向大家介绍利用ajax获取后端数据存放入前端(.html文件)页面<td></td>中,主要包括利用ajax获取后端数据存放入前端(.html文件)页面<td></td>中使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 针对的问题:
由于便捷高效,大部分前端采用jsp,但仍存在前端页面为index.html文件,所以,对于前后端数据的传送及显示有一定的问题。
2. 解决办法:
声明:本人前端页面名称index.html,后端产生数据的是servlet层,文件名称为 Pre_sensorServlet.java
需要给以下页面标红的格子里传入由后端获取到的数据(因为项目还未结题,仍处于保密阶段,文字信息已抹掉)
(1) 在前端页面文件中插入ajax(重点是这段代码!!!)
<td id="ttd"> <script language="javascript"> $.ajax({ url : "http://localhost:8080/xxxx(你的工程名字)/Pre_sensorServlet", (这是第一步,用来请求运行并传输后端数据的代码) type : "post",
dataType:"json",(后端传输过来的数据类型,可有可无,如果没有,程序会自行判断数据格式,不过我的是json) success : function(data)(data用来接收Pre_sensorServlet传输过来的数据) { //返回的数据带有[],用replace去掉 ttd.innerText =data.replace(/\[|]/g,''); (我输出看了一下,我的数据为[192],因此需要去除中括号,仅保留数据,在之后赋值给td) }, error : function() { alert("数据传输失败!"); } }); </script> </td>
2,展示我的Pre_sensorServlet.java的部分代码
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ int calPreSensorNum = pre_sensorService.getCalPreSensorNum();//192 本代码返回数据只有一个,list型数据另说 JSONArray data = JSONArray.fromObject(calPreSensorNum); //[192] // 这部分是将获取到的数据转为json response.setCharacterEncoding("utf-8"); PrintWriter respWritter = response.getWriter(); respWritter.append(data.toString()); //[192] }
3. 总结
在ajax中:
url部分,有的人采用注解@requestMapping(value="/")也可以,只是本人在注解方面用的不是特别娴熟,所以直接用绝对路径访问servlet层代码,获取数据。
给td赋值时,由于是html文件,需使用 ttd.innerText = data 来赋值。(ttd为 <td id=ttd></td>)
本人返回的数据为json格式,其他格式的数据另说。
运行结果,就为上述的第一张图片结果展示
原文地址:https://www.cnblogs.com/lwcwj/p/12793242.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在spring-boot中使用pageHelper插件
- 要深入 JavaScript,你需要掌握这 36 个概念
- mybatis-plus实现增删改查
- mybatis-plus代码生成器
- mybatis-plus逻辑删除
- mybatis-plus一些关键配置
- mybatis-plus自定义sql注入器
- k8s代码走读---kube-controller-manager
- 我们一起学一学渗透测试——黑客应该掌握的HTML基础知识(一)
- 一套漏洞组合拳接管你的账号
- 我们一起学一学渗透测试——黑客应该掌握的HTML基础知识(二)
- 我用Paddle Lite在树莓派3b+上从零开始搭建“实时表情识别”项目
- mybatis-plus:自动填充功能
- 词义类比与全局词共现信息不可兼得?基于飞桨实现的GloVe说可以
- MyBatis-plus乐观锁插件