扫码枪扫码触发接口传递参数(实例)

摘要:
前两天因为业务需要,研究了一下扫码枪,得出了两个笨方法,用于扫码后调用接口传输数据方法一:1.先生成一个二维码,改二维码里的数据就是你要请求需要向接口所传递的数据2.然后写一个html页面,里面就放一个input框就好了,这个input框就是用来接收你二维码里面的数据的3.写一段js,让用户打开页面后input自动永久聚焦4.再写一段js,检测input里面是不是有输入内容,如果有,那么则拿到里面

前两天因为业务需要,研究了一下扫码枪,得出了两个笨方法,用于扫码后调用接口传输数据

方法一

1.先生成一个二维码,改二维码里的数据就是你要请求需要向接口所传递的数据

2.然后写一个html页面,里面就放一个input框就好了,这个input框就是用来接收你二维码里面的数据的

3.写一段js,让用户打开页面后input自动永久聚焦

4.再写一段js,检测input里面是不是有输入内容,如果有,那么则拿到里面的内容触发ajax把内容提交过去,提交成功后清除掉input里面的value值即可

附上代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <input type="text"id="d1"value=""style="opacity:0;">
<script type="text/javascript">
    vara =[];
    vartimeout;
$("input").keyup(function(){
    a.push($(this).val());
    clearTimeout(timeout);
      timeout =setTimeout(function(){
          varb =a.pop();
        $.ajax({
           url:b,
           type:"post",
           data:{},
           jsonType:"json",
           success:function(a){
              $('input').val("");
              console.log(a);
           },
           error:function(e){
              alert("错误");
              $('input').val("");
            }
        });
  },1000);
});
//input自动永久聚焦
$(document).ready(function(){
$("input").focus();
})
$(function() {
  $('#d1').blur(function() {
  varthat = this; //或者用闭包 
setTimeout(function() { $(that).focus(); },100); }); });
  $('#d1').blur(function() {$(this).focus();
});
</script>
</body>
</html>

方法2:

因为扫码枪在扫码的时候会自动触发submit,那么我们可以利用这个点,去实现form表单提交

如:

     <form method="post"action="https://www.cnblogs.com/junyi-bk"> 
            <input type="text"id="d1"value="">
            <input type="submit">
     </form>

该方法比方法一要简单很多,因为我们是利用扫码枪自动触发submit的特效来提交,所以也不用写ajax,但是缺点就是,传递过去的数据只能是一条。

免责声明:文章转载自《扫码枪扫码触发接口传递参数(实例)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇HTTP API接口安全设计前端如何应对笔试算法题?(用node编程)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

input中blur失去焦点事件与点击事件冲突时如何解决

方法一 使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(".cy-close").css('display','block'); }, blur:function() { setTimeout(f...

TP5.1 爬虫

环境 PHP >= 7.1 !!!PHP >= 7.1 !!!PHP >= 7.1 !!! 安装 composer require jaeger/querylist 后端 //爬虫 public functioncrawler() { if(request()->post()){...

linux系统下memcached启动正常但程序无法连接的问题解决

在虚拟机linux安装好memcached之后,试着用java程序连接一下memcached的服务端,但却出现了以下错误 com.schooner.MemCached.SchoonerSockIOPool Fri Jan 09 09:45:59 CST 2015 - ++++ failed to get SockIO obj for: 192.168.16...

ubuntu添加中文输入法

11.04以前到版本: 1、System->Administration->Language Support-> Install Languages.  chose  Chinese(simplified), 现在就等待吧。 2、System->Preferences->IBus Prefernces.在Input metho...

移动端H5页面遇到的问题总结

 最近刚做完一个移动端的项目,产品之无敌,过程之艰辛,我就不多说了,记录下在这个项目中遇到的问题,以防万一,虽然这些可能都是已经被N多前辈解决掉了的问题,也放在这里,算是为自己漫漫前端路铺了一颗小石子儿吧,也在文末留下自己未能解决的疑问,希望看到的朋友能解惑。   都知道做移动端的开发,在电脑上调试好了的东西,放在手机里可能真的秒秒钟就炸了,我发誓绝对没...

JavaScript初学指南

目录: 包含与引入(Embedding,including) write 和 writeln 文档对象(document object) bgColor 和 fgColor 消息框(Message Box) 变量(Variables)和条件(Conditions) 函数(Function) onClick onLoad onUnload 表单(Form)...