创建纯HTML页面 demo示例

最新推荐文章于 2024-06-12 10:36:38 发布

woodFan先生

最新推荐文章于 2024-06-12 10:36:38 发布

阅读量3.6k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42715494/article/details/116940639

版权

前端专栏收录该内容

60 篇文章 0 订阅

订阅专栏

背景：

因为只作简单的接口测试使用，需要最低的开发成本实现，所以要实现一个纯HTML页面

开发步骤：

一、生成html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读卡测试</title>
</head>
<body>
    /*    页面规划    */
</body>
<script type="text/javascript">
    /*    JS逻辑    */
</script>
<style>
    /*   CSS样式    */
</style>
</html>

二、引入jquery

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

三、js代码

  // 准备 js代码，所有的js逻辑功能都在这里面定义
  $(document).ready(function(){

        //根据id绑定事件
        $("#dqICCard").click(function(){
            htmlobj=$.ajax({
                type : "GET",
                url : "http://127.0.0.1:24010/ZKIDROnline/MFCard?OP-DEV=1&CMD-URL=1&iPort=1",
                dataType : "json",
                async: true,
                success : function(data) {
                    console.log('返回结果   data=',data)
                    let htmlCode = '{'+
                        '   <p>执行状态码：'+data.ret+'</p>'+
                        '   <p>读 取 结 果：'+data.data.ICSnr+'</p>'+
                    '}';
                    $("#dqICCardResult").html(htmlCode);
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("读取失败!");
                }
            });
        });
    });

四、显示结果

woodFan先生

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
创建纯HTML页面 demo示例

背景：因为只作简单的接口测试使用，需要最低的开发成本实现，所以要实现一个纯HTML页面开发步骤：一、生成html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>读卡测试</title></head><body> /* 页面规划 */</body&gt.
复制链接

扫一扫

专栏目录