Jquery&ajax实现无限刷卡(扫码器扫描)，一键认证/确认操作

版权属于: Postbird - There I am , in the world more exciting!

原文地址: http://www.ptbird.cn/jquery-ajax-all-swing-card.html

转载时必须以链接形式注明原始出处及本声明。

说起刷卡操作或者是扫描器扫描二维码，我们平时接触最多的可能是桌面软件客户端，随着B/S架构的不断完善以及网站系统的技术成熟，目前很多系统像是ERP/OA都是基于网站系统进行开发的，因此在有事情况下不可避免的要接触到刷卡或者是扫描器的操作。

刷卡机或者是扫描器说白了就是以某种形式读出一串有用的数字而已，再根据这个数字进行相关的操作，之前参与的一个ERP系统是生成了条形码通过扫描器扫描自动确认货物进入仓库，另外barberShopUMS-理发店会员提成解决方案是进行的刷卡操作，今天做学院科创管理系统的讲座人数确认情况时也用到了刷卡机。

描述：

之前讲座系统是报名后，学生通过参加讲座现场签到，根据签到，整理成txt文档，进行php的读取和逐步认证或者是签到后，根据签到名字逐个查找签到，无论是哪种方式，某种程度上，对于讲座管理人员都是比较麻烦的。

 

根据上述情况，结合同学使用的校园卡，进行刷卡认证参加讲座。

问题：

刷卡要解决的问题不是特别麻烦，首先是机器，这一点倒也不是很麻烦，能读出学号这一串数字就足够了，别的也不需要。

其次是代码的部分：

1、保证刷卡的人都是报名的人，未报名不允许刷卡。

2、保证能够根据刷卡自动增加表单，不需要手动去增加。

3、能够判断刷卡是否重复，剔除重复。

4、一键验证。

实现：

注：系统使用ThinkPHP开发。

已经写好的html代码如下所示：

其中，每次增加都是增加一个 <tr>,而每个<td>?id 实际上是不同的，同时使用οninput=”listenUnum(this);” onpropertychange=”listenUnum(this);来实时监听，防止误刷。（当前系统卡号是9位）,刷卡号，姓名自动识别 ?readonly。

form提交的时候使用的是stunum[]和stuname[]数组的形式，因此增加多少input都无所谓。

每个input的id是唯一标示，将通过代码累加计数的方式进行操作，如果不符合刷卡的要求，就将当前的input的值全部置空，再次进行刷卡即可。

< tr class="card-tr-1" guid="1" >