创建纯HTML页面 demo示例

谁践踏了优雅 2023-01-22 04:58 16阅读 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 ###

### 三、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("读取失败!");
                    }
                });
            });
        });

### 四、显示结果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70]: /images/20221020/855f71fa3ef0473f8466f9094089d34d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1]: /images/20221020/3c14afa789dd4fe5a271d66c4c0cdc86.png