Question

我正在使用js插件（instascan）扫描QR码并获取输出。我希望此解码的输出使用AJAX发送到php页面。这意味着我想将输出发送到php页面并从数据库中获取一些数据，并在前端显示该数据。必须在没有任何人工干预的情况下连续完成此操作，例如使用表单手动提交QR输出。这就是我尝试在QR码扫描仪中间使用AJAX的方式。扫描仪工作正常，但AJAX成功未显示任何输出。我想知道我尝试做的事情是否可行，这是否是最好的方法以及我哪里做错了。

这是带有扫描仪AJAX的js代码。我在他们提供的演示中使用了代码。

var app = new Vue({
  el: '#app',
  data: {
    scanner: null,
    activeCameraId: null,
    cameras: [],
    scans: []
  },
  mounted: function () {
    var self = this;
    self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
    self.scanner.addListener('scan', function (content, image) {
      console.log(content);  //this gives me the output
      jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>home/get_qr",
        dataType: 'json',
        data: {content: content},
        success: function (data) {
            console.log(data);  //this doesn't show anything
            //alert(content);
        }
      });
    });
    Instascan.Camera.getCameras().then(function (cameras) {
      self.cameras = cameras;
      if (cameras.length > 0) {
        self.activeCameraId = cameras[0].id;
        self.scanner.start(cameras[0]);
      } else {
        console.error('No cameras found.');
      }
    }).catch(function (e) {
      console.error(e);
    });
  },
  methods: {
    formatName: function (name) {
      return name || '(unknown)';
    },
    selectCamera: function (camera) {
      this.activeCameraId = camera.id;
      this.scanner.start(camera);
    }
  }
});

这是我用来测试输出的php代码。我正在使用PHP的codeigniter框架。这是控制器。

public function get_qr()
    {
            $key=$_POST['content'];
            echo json_encode($key);
    }

请帮助我解决这个问题。

对不起，我的英语。

将AJAX与QR码扫描仪instascan结合使用

0 个答案: