网站幻灯片 按纽,p2p网站建设制作,建站前端模板,wordpress 顶部一、基于Django的Web应用界面的开发#xff1a;
在Realtimeresults.html上添加一个按钮组件#xff0c;获取检测到的轴型和车轮信息#xff0c;点击后可以获取package.json里存放的json数据#xff0c;效果如下#xff1a; 实现逻辑#xff1a;需要从URL设置、视图函数、…一、基于Django的Web应用界面的开发
在Realtimeresults.html上添加一个按钮组件获取检测到的轴型和车轮信息点击后可以获取package.json里存放的json数据效果如下 实现逻辑需要从URL设置、视图函数、html代码三方面来实现。
1、需要先在django项目下的urls.py里设置路由当浏览器端请求的URL与该URL匹配成功时django会调用项目下里的view.py里的视图函数realtimeresults_page该函数先把该json文件读取出来并连同Realtimeresults.html一起返回保证在Realtimeresults.html可以使用到该数据。 关于文件的路径
在settings.py里需要先加载django项目的根路径(BASE_DIR)再加上json文件的相对路径。 package.json如下 2、装车辆信息的盒子如下 分别将json数据的字段加入到对应的盒子即可。
2、将django项目共享给同一局域网下所有主机进行查看。
在setting.py里设置 再通过该命令python .\manage.py runserver 0.0.0.0:8000可启动服务器。浏览器输入本机ip:192.168.1.231:8000即可访问该django项目。 二、通过jQuery库来实现浏览器端与服务器端的json数据交换
效果如下 jQuery 是一个 JavaScript 库jQuery 极大地简化了 JavaScript 编程相比于原生js代码来说更加易于开发代码更加简洁集成性更强。 对于jQuery的使用可以在官方下载静态库文件jquery.js也可以在head标签里通过CDN(内容分发网络)来引用
script srchttp://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js
AJAX 是与服务器交换数据的框架在不重载全部页面的情况下实现了对部分网页的更新。AJAX 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
通过 jQuery AJAX 方法可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON同时能够把这些外部数据直接载入网页的被选元素中。 实现逻辑
定义了getResult函数如下 以Get方式向服务器来发送Ajax请求若请求成功时执行回调函数当update_flag为1时则服务器端有新数据需要发送 将装对应的html内容的盒子填入json数据的内容即可。setInterval是设置定时器8s会调用一次getResult函数。
如果没有新的json数据内容则对应的html内容显示无即可 可以看到不断地在发送get请求 有个问题待优化利用递归调用请求结果的函数的方式来从服务器端读取数据请求的次数会不断增加需要考虑服务器是否可以承载
