php+js扫码枪实现签到的功能

扫码枪在生活中是很常见的工具,但是我从没想过它会和我的系统结合在一起,下面我们来康康如何进行前后端的交互.
首先需要明白的一点是,当显示屏上有文本框时,扫描二维码或者条形码,成功后会把二维码中的信息展示在文本框中,并且触发enter事件(划重点要考)

需求:点击页面的扫码签到按钮,弹窗,扫码,把信息展示在文本域中,将对应的用户信息展示在弹窗下方,点击确认签到按钮,实现签到功能.

效果图

扫描成功后,按回车键,通过ajax调取接口,接收信息,展示在用户信息框中

下面来看具体实现的代码,首先是前端代码

<a id="scanBtn" class="layui-btn layui-btn-primary layui-btn-sm">&nbsp;扫码签到</a>

<form id="scanForm" class="layui-form" style="display: none; margin: 25px 25px 25px 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">扫码枪签到</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="content" autofocus lay-verify="required" autocomplete="off" id="content">
        </div>
        <div class="layui-form-mid layui-word-aux aux">注:扫码前将鼠标放入上方文本框,点击获取光标焦点后开始扫码</div>
    </div>

    <table class="layui-table" lay-skin="nob">
        <tr style="border: none;">
            <th colspan="4">用户信息</th>
        </tr>
        <tbody>
        <tr>
            <td>姓名</td>
            <td id="scanName"><input type="text" class="layui-input"></td>
            <td>用户ID</td>
            <td id="scanID"><input type="text" class="layui-input"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td id="scanPhone"><input type="text"  class="layui-input"></td>
            <td>性别</td>
            <td id="scanSex"><input type="text"  class="layui-input"></td>
        </tr>
        <tr>
            <td>单位</td>
            <td id="scanCompany"><input type="text"  class="layui-input"></td>
            <td>部门</td>
            <td id="scanDepart"><input type="text"  class="layui-input"></td>
        </tr>
        <tr>
            <td>职务</td>
            <td id="scanPosition"><input type="text"  class="layui-input"></td>