用JS实时调用数据显示在HTML页面上

Posted 2023-04-09

http://www.nxyhgjs.com/admin/HQDataAction_load.action
用JS实时调用以上数据显示在html页面上

要实现这个功能，要用到ajax获取后端数据，和前端js定时器的知识，
首先自定义一个ajax获取要显示在html页面上的数据的方法，例如方法getdata,这个方法把获取的返回值，通过js动态的显示到html页面要显示的区域，然后再写一个js定时器来实现实时调用数据，如：
<script>
//定时器 异步运行
function hello()
alert("hello");

var t2 = window.setTimeout("hello()",3000); //定时器
//window.clearTimeout(t2);//去掉定时器
</script>
把里面的hello方法换成你ajax获取数据的方法名，然后改下定时器里面的方法名和时间，这里设置的是3秒钟执行一次可以设置成你自己要的数据，就实现了你要的页面实时调用数据了。 参考技术A 1、触发事件， btn是按钮的id，#btn是找到 ID=btn的元素
$("#btn").click(function()
ajax_submit();
)
2、编写事件触发的函数
ajax_submit()
var url = "shopPg/foodAction!changestatc.action";--访问的地址
var param = --传入的参数
"fdId":id,
"foodStatc":"no"
;
$.post(url,param,function(data)
var datas = data;--请求返回的结果集 Json格式
if(datas=="true")
alert("成功")

else
alert("失败")

);
参考技术B

你给的链接返回的是一段json的文本

把下面代码放到你的body中间

<script language="javascript">
$(function()
    $.ajax(
           url : "http://www.nxyhgjs.com/admin/HQDataAction_load.action",
           dataType : "json",
           success : function(data)
                   for(var key in data)
                        document.write(key + "=" + data[key] + "<br/>")
                   
           
    );
)
</script>

追问

请写一下完整的HTML页面源代码，还有注意数据是实时变动的

参考技术C 用VUE 或者AG ,react 这几个框架都可以实现你的要求

前端上传文件实时显示进度条和上传速度的工作原理是怎样的？

参考技术A

后端的责任。

前端上传文件实时显示进度条和上传速度的工作原理就是后端的责任，在Django中实现需要重载上传文件的函数，在上传时文件是被分成数个MB的chunk处理的，每次都会调用这个上传函数。也就是说，每处理一个chunk就更新uploadedsize，然后浏览器端通过AJAX获取这个值和文件大小
最后用JavaScript渲染到页面上。

前端只能说会用框架和插件干活。前段时间用的百度的webuploader，demo就带进度条的。js代码不多可以看一下，猜测是监听事件。上传是前端和通信协议做的事，后端是写入。在比较传统流和和spring自带的transferto的耗时统称上传时间是不对的，应为写入时间。

项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用html5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件。

nginx话lua可以拿到链接的套接口，读取套接口就可以知道当前上传了多少了。可以看下openresty的lualib/resty/upload.lua。