背景:
因为只作简单的接口测试使用,需要最低的开发成本实现,所以要实现一个纯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("读取失败!");
}
});
});
});
四、显示结果