简单的页面查询工具

最新推荐文章于 2022-05-29 10:33:53 发布
最新推荐文章于 2022-05-29 10:33:53 发布
阅读量1.9k 收藏 6
点赞数 2
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41479678/article/details/112650859
版权

作为测试开发通常要写一些测试工具，之前尝试了用go写了一套gin框架，开发了查询接口，改良了之前的html查询页面，满足了基本的查询需求：

<!DOCTYPE html>
<html>
<head> 
        <link rel="stylesheet" type="text/css" href="tb.css">

    <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
    </script>
    <script src="https://unpkg.com/flyio/dist/fly.min.js"></script>

    <meta charset="utf-8"> 
</head>
<body>
    <!-- <p id="key">key</p>
    <p id="value">value</p> -->
    请选择查询：<select id="info"  style="width:200"> 
            <option value="mac"  SELECTED>Mac</option>
            <option value="sn">Sn</option>
            <option value="deviceId">DeviceId</option>
    </select>  
    <input id="data" type="search" name="name" />
    <input type="submit" value="点击查询"  onclick="get()"/>      

    <script>
        var Mac,Sn,DeviceId,Model

        function get(){
            //获取 输入框的值
            var type=document.getElementById("info").value;
            var mydata=document.getElementById("data").value;


            // document.getElementById("key").innerHTML="key: "+type;
            // document.getElementById("value").innerHTML="value: "+mydata;

            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var info = xmlhttp.responseText;
                    temp =JSON.parse(info);
                    console.log(temp); 
                    console.log(typeof temp);
                    console.log(temp.data.Mac); 
                    console.log(temp.data.Sn); 
                    console.log(temp.data.Model); 
                    console.log(temp.data.Device_id); 
                    Mac=temp.data.Mac
                    Sn=temp.data.Sn
                    Model=temp.data.Model
                    DeviceId=temp.data.Device_id
                    document.getElementById("mac").innerHTML="Mac: "+Mac;
                    document.getElementById("sn").innerHTML="Sn: "+Sn;
                    document.getElementById("model").innerHTML="Model: "+Model;
                    document.getElementById("devid").innerHTML="DeviceId: "+DeviceId;

                }
            }
            xmlhttp.open("GET","http://api.puppysmart.com/aiot/v1/device?"+type+"="+mydata,true);
            xmlhttp.send();

        }

    </script>

    <!-- <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
          <td align="center" class="biaoti" height="60">AIoT入库设备信息表</td>
        </tr>
        <tr>
          <td align="right" height="25">2017-01-02---2017-05-02</td>
        </tr>
    </table> -->
    
    <p id="mac"></p>
    <p id="sn"></p>
    <p id="model"></p>
    <p id="devid"></p>
</body>
</html>

效果图：
在这里插入图片描述
查询结果展示：
在这里插入图片描述

没有任何的样式，稍后研究页面的样式

总结：

1.html元素的id一定不能有重复的值，不然就显示出错
2.同一个元素最好id和name只有一个，使用上不易出错

改良版：

<!DOCTYPE html>
<html>
<head> 
    <link rel="stylesheet" type="text/css" href="tb.css">

    <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
    </script>
    <script src="https://unpkg.com/flyio/dist/fly.min.js"></script>

    <meta charset="utf-8"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
            <tr>
               <td align="center" class="biaoti" height="60" >AIoT入库设备信息</td>
            </tr>
            <tr>
              
                <div id="datetime" class="datatime">
                <script>
                    setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
                </script>
                </div>
            </tr>
        </table>

</head>
<body>
    <!-- <p id="key">key</p>
    <p id="value">value</p> -->
<br>
<br>
    请选择查询：&nbsp;<select id="info" class="ivu-select" style="width:200px;height: 30px; ">
            <option value="mac"  SELECTED>Mac</option>
            <option value="sn">Sn</option>
            <option value="device_id"&nbsp;&nbsp;>DeviceId</option>
    </select>  
    &nbsp;&nbsp;&nbsp;请输入：&nbsp;<input id="data" type="search" name="name" style="width:200px;height: 30px;"/>&nbsp;&nbsp;
    <input type="submit" value="查询" style="background-color: #108ee9;width: 100px;height: 30px;color: #FFFFFF;border:none;border-radius: 5px  " onclick="get()"/>&nbsp;&nbsp;
    <input type="reset" value="重置"  style="background-color: #108ee9;width: 100px;height: 30px;color: #FFFFFF;border:none;border-radius: 5px  " onclick="location.reload()"/>

    
    <script>
        var Mac,Sn,DeviceId,Model;

        function get(){
            //获取 输入框的值
            var type=document.getElementById("info").value;
            var mydata=document.getElementById("data").value;


            // document.getElementById("key").innerHTML="key: "+type;
            // document.getElementById("value").innerHTML="value: "+mydata;

            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var info = xmlhttp.responseText;
                    temp =JSON.parse(info);
                    console.log(temp); 
                    console.log(typeof temp);
                    console.log(temp.data.Mac); 
                    console.log(temp.data.Sn); 
                    console.log(temp.data.Model); 
                    console.log(temp.data.Device_id); 
                    Mac=temp.data.Mac;
                    Sn=temp.data.Sn;
                    Model=temp.data.Model;
                    DeviceId=temp.data.Device_id;
                    document.getElementById("mac").innerHTML="Mac: &nbsp;"+Mac;
                    document.getElementById("sn").innerHTML="Sn: &nbsp;"+Sn;
                    document.getElementById("model").innerHTML="Model: &nbsp;"+Model;
                    document.getElementById("devid").innerHTML="DeviceId: &nbsp;"+DeviceId;
                    document.getElementById("title").innerHTML="DeviceId: &nbsp;"+DeviceId;

                }
            }
            xmlhttp.open("GET","http://api.puppysmart.com/aiot/v1/device?"+type+"="+mydata,true);
            xmlhttp.send();

        }

    </script>


    <br>
    <br>
    <div>&nbsp;&nbsp;&nbsp;&nbsp;
        <span id="mac"></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span id="sn"></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span id="model"></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span id="devid"></span>
    </div>

</body>
</html>

实际效果：
在这里插入图片描述
以表格输出：
在这里插入图片描述

charlie_wang007
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
查询 html页面
y4418的博客
08-01 2212
下面我们来看一下用vs做的查询功能 首先看一下html的代码 3.这边我们先做一个layui的一个表格，也就是在页面上显示的图表的表头 4.首先先初始化layui模块 5.Elem就是获取id cols就是开始写表头数据 6.然后渲染数据表，这个做的是表头啊按照代码去写就好，没什么难度 7.然后在绑定图书名称和图书类型的下拉框，获取id然后写一个路径就好了 8.自定义表这个省略这是做修改的。 9.条件查询就是根据id获取val中的内容 10就是重载表格基本就这样了 .
查询页总结
weixin_66902855的博客
08-11 573
查询、分页、阅读
Web编程期末实践——Angular+nodejs-express搭建简易新闻查询网站
lit_chicken的博客
06-30 960
Web编程期末实践——Angular+nodejs-express搭建简易新闻查询网站项目要求数据库设计基础配置用户注册、登录及登出新闻查询图表展示柱状图饼图折线图词云用户管理 · 本项目在期中项目（指路链接：Web编程期中实践——Nodejs新闻爬虫及查询网站）的基础上修改完成。 · 项目要求 数据库设计 该项目我们在crawl数据库中设计了3个表：fetches、user和user_action。 （1）fetches表同期中项目的设计一样，只不过我们在此处修改优化了当时的爬虫代码，利用正则表达式规
PHP 简单网页查询界面 带数据库
六桥风月IT随笔
04-02 1997
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Activation co...
DAY6：简单的登录查询网页
无知码农
07-02 183
文件一：login.jsp <%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/jsp/taglibs.jsp" %> <html> <head> <title>${basePath}</title> </hea...
TeleportUltra 简单小工具
04-17
这款“简单小工具”虽然看似小巧，但其背后蕴含的技术却相当复杂且实用。 【主要功能】 1. **全站下载**：Teleport Ultra 可以分析一个网站的所有链接，然后下载包括HTML、CSS、JavaScript、图片、视频等在内的...
基于python flask开发的简单基金查询工具
最新发布
05-27
【作品名称】：基于python flask开发的简单基金查询工具 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： web查看...
简单介绍菜单切换单页面网页模板
01-23
8. **下载资源**：提供的URL链接可能包括PPT模板、字体资源和网页模板，这些都是辅助设计和开发单页面网页的工具。PPT模板可以作为设计灵感来源，字体影响文本的可读性和风格，而下载的网页模板则可以直接使用或作为...
鲁班H5页面生成工具 v1.17.0.zip
03-27
通过查看和分析源码，用户可以理解H5页面的工作原理，提高自身的编程技能。 在毕业设计论文和计算机案例中，鲁班H5工具是一个强大的辅助工具。学生可以利用它来构建交互式的演示页面，生动地展示研究成果或项目实施...
手机页面h5的简单demo
01-05
在移动互联网时代，H5（HTML5）技术已经成为构建手机页面的重要工具，它极大地提升了网页在移动设备上的表现力和交互性。本“手机页面H5的简单demo”旨在展示如何利用HTML5来创建适用于手机的网页应用，尤其是信息...
简单的网页模板（html）
06-25
简单的界面模板 包含菜单， 登录，查询等
一个简单的SSH框架写的查询页面
04-19
NULL 博文链接：https://hua289581229.iteye.com/blog/1876263
网页查询(网页查询)
03-02
网页查询网页查询网页查询网页查询网页查询网页查询
生成多条件查询页面
哈
05-29 931
最终生成的条件查询页面 代码 封装 @Getter @Setter @NoArgsConstructor @AllArgsConstructor @ToString public class QuerySelect { private String value; private String text; private List<QuerySelect> list; } 具体工具类 public class GenPageQueryUtil { private
JSP页面查询显示常用模式
王道JAVA
07-31 1362
author: evanemail: evan_zhao@hotmail.com    背景：1．    需要将数据库查询结果在JSP中以列表方式显示2．    在一个良好的J2EE模式中数据库查询一般用DAO实现（Data Access Object）， JSP仅用于显示数据问题：    通过JDBC ResultSet可获取查询结果（存在于数据库缓冲区内），但在Statement、Connec
JAVA查询数据库并显示jsp_java servlet数据库查询并将数据显示到jsp页面
weixin_33365244的博客
02-27 5345
需要的jar包：mysql-connector-java.jarbuild path只是个jar包的引用，部署的时候想不丢包最好还是手动拷贝到对应项目的lib文件下。在try{}中定义的变量为局部变量。WEB-INF对于浏览器是无法直接通过url访问的，因此要想跳转到WEB-INF目录下必须采用服务端的foward方法而不能采用redirect方法。注意网页的编码问题，一般全采用utf-8就没乱码...
如何用java做分页查询页面
ApassionBoy
09-10 2655
分页算法 我们先在util中写一个分页的工具类，代码如下： package com.util; import java.util.ArrayList; public class PageModel&amp;amp;amp;amp;lt;T&amp;amp;amp;amp;gt; { //定义属性表示当前页 private int pageNo =1; //定义属性表示每页显示的条数 private int pageSize =2; //定义数
关于页面查询条件保持的思考（一）
believer123的专栏
12-29 4035
在项目中，查询条件保持是经常使用到的，特别是管理后台。对于前台页面来说，通常为了访问的方便会使用get的方式进行表单提交，这样进行页面分享或者发送给好友时可以直接打开对于的页面。但是对于管理后台来说，地址栏上的一大串url参数是不允许的，不美观也不安全。 比如在用户查询页面，可以根据用户的年龄，姓名，昵称，等等参数进行查询，而且可能客户已经翻到了第n页上，此时点击某个用户详细，页面跳转到用户详细...
php做一个简单的查询页面,phpmysql一个查询优化的简单例子_PHP教程
weixin_36446632的博客
03-25 510
PHP+Mysql是一个最经常使用的黄金搭档，它们俩配合使用，能够发挥出最佳性能，当然，如果配合Apache使用，就更加Perfect了。因此，需要做好对mysql的查询优化。下面通过一个简单的例子，展现不同的SQL语句对于查询速度的影响：存在这样的一张表test，它有一个自增的id作为主索引。现在要查询id号处于某一个范围内的记录，可以使用如下SQL语句：代码如下SELECT *FROM `te...
arcgis水文分析工具下载
01-02
ArcGIS水文分析工具可帮助使用者进行水文数据的整理、分析和可视化。要下载ArcGIS水文分析工具，首先需要登录至ArcGIS官方网站或者Esri中国官网。然后，找到相应的水文分析工具页面，浏览并了解该工具的功能和应用范围。 在确认需要的水文分析工具之后，可以在网站上寻找相应的下载链接。点击下载链接，按照提示完成下载和安装过程。对于付费工具，可能需要购买许可证或者订阅相关服务。 在下载完成后，根据安装说明进行安装。一般来说，安装过程比较简单，只需要按照步骤操作即可。安装完成后，可以在ArcGIS软件中找到并打开水文分析工具，开始进行水文数据的处理和分析工作。 需要注意的是，在使用水文分析工具时，应该提前准备好需要的水文数据，并对软件的操作界面和功能进行充分了解。同时，也要遵守相关的数据使用和分析规定，确保数据的准确性和合法性。 总的来说，下载ArcGIS水文分析工具并不复杂，但需要注意选择合适的工具、购买必要的许可证或服务、按照安装说明进行安装，然后就可以开始使用水文分析工具进行工作了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值