利用ajax获取后端数据存放入前端(.html文件)页面<td></td>中

摘要:
给td赋值时,由于是html文件,需使用ttd.innerText=data来赋值。本人返回的数据为json格式,其他格式的数据另说。
1. 针对的问题:

由于便捷高效,大部分前端采用jsp,但仍存在前端页面为index.html文件,所以,对于前后端数据的传送及显示有一定的问题。

2. 解决办法:

声明:本人前端页面名称index.html,后端产生数据的是servlet层,文件名称为 Pre_sensorServlet.java

需要给以下页面标红的格子里传入由后端获取到的数据(因为项目还未结题,仍处于保密阶段,文字信息已抹掉)

利用ajax获取后端数据存放入前端(.html文件)页面<td></td>中第1张

(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为 <tdid=ttd></td>

本人返回的数据为json格式,其他格式的数据另说。

运行结果,就为上述的第一张图片结果展示

免责声明:文章转载自《利用ajax获取后端数据存放入前端(.html文件)页面&amp;lt;td&amp;gt;&amp;lt;/td&amp;gt;中》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Android IOS WebRTC 音视频开发总结(六)-- iOS开发之含泪经验控制Windows音量下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Echart 动态生成series数据

要做成页面只传入数据,js生成图表,如下图 下面是js代码 var LineChart = function (ID, title, axisData,seriesData) { var myChart = echarts.init(document.getElementById(ID)); var newData = [];...

前端er们如何最快开发h5移动端页面?

声明在前:本文原创,一字一字手打,转载还请消息M我一下,求伸手党手下留情。   一直以来对web移动端的东西做的比较多,总是在做确从来没总结过,于是想对移动端的框架选择到相关技巧,进行一个归纳。首先声明,我也是只萌新,不是大神,肯定会有写得不够严谨的地方,欢迎指正~互相交流,若有忍不了的地方,求轻喷,轻喷,喷.....   以下为正文:   互联网已经进入...

MySQL空间数据的保存

MySQL支持空间数据的存储,再做数据存储时,可以直接将数据转为WKT格式。 WKT几何对象表示的示例(请注意,点坐标对以逗号分隔): POINT(6 10)LINESTRING(3 4,10 50,20 25)POLYGON((1 1,5 1,5 5,1 5,1 1),(2 2,2 3,3 3,3 2,2 2))MULTIPOINT(3.5 5.6, 4...

orcl 如何快速删除表中百万或千万数据

orcl 数据库表中数据达到上千万时,已经变的特别慢了,所以时不时需要清掉一部分数据。 bqh8表中目前有10000000条数据,需要保留19条数据,其余全部清除掉。 以下为个人方法: 1、首先把需要保留的数据备份到temp1临时表中。 create table temp1 as select * from bqh8 where id<20;sele...

小目标 | DAX高级实践-Power BI与Excel联合应用

· 适用人群:数据分析专业人士,在数据分析方向需求发展人士 · 应用场景:数据汇报、数据可视化展现、数据建模分析 · 掌握难度:★★★★☆  本期讲师 DAX高级实践-Power BI与Excel联合应用   通过前序三篇文章的学习,大家已经了解到在DAX数据建模中如何搭建数据模型、如何设计数据模型中对于值的度量计算以及如何查询数据模型。   而在实际...

Spring Boot页面中select选项绑定数据库数据

  在一个select框中,option往往是写好的,这样难以适应数据库中项目的动态变化,因此需要将option中的项目与数据库数据进行绑定,本项目使用Spring Boot进行开发,下面演示绑定方法。   首先在前端定义一个基本select框,在这里把第一项写好了,并显示为select框的默认项。 <select id="selectshijuan...