将扫描的QR内容传递到PHP

时间:2018-11-24 18:36:36

标签: php vue.js qr-code

我有一个使用Instascan和Vue.js库的QR码扫描仪。现在,我要做的是将扫描的内容自动发布到php文件中,并在扫描后重定向到该php文件,但是我似乎无法传递该值。这是我的HTML代码:

    <div class="form-group" id="app">
        <label v-for="scan in scans" class="disptext" style="font-size: 30px; top: 73%; left: 45%;">Welcome, </label>
        <input v-for="scan in scans" :key="scan.date" :title="scan.content" class="form-control" id="qr_user" name="qr_user" placeholder="Scan User QR Code" :value="scan.content" style="width: auto; font-size: 30px; left: 37%; text-align: center; position: absolute; top: 80%; border: 0; background: transparent;">
        <input type="hidden" name="qr" id="qr" :key="scan.date" />
    </div>

我试图这样通过我的js文件发布它:

    mounted: function () {
    var self = this;
    self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
    self.scanner.addListener('scan', function (content, image) {
        self.scans.unshift({ date: +(Date.now()), content: content });
        $.post("scanquery.php", {qr: content});
        window.location.assign("scanquery.php");
    });

但是php首先执行,因此“ qr”始终未定义。我该怎么办?

修改

这是php代码,我刚刚通过调用“ qr”将其发布:

    $user = $_POST['qr'];
    if(!empty($user)){
        echo $user;
    }

1 个答案:

答案 0 :(得分:0)

您可以通过使用window.location.assign()中的回调将$.post的执行推迟到帖子完成后:

$.post("scanquery.php", {qr: content}, () => {
    window.location.assign("scanquery.php");
});

我认为您的有效载荷类型不匹配。 $ .post将对象格式化为JSON,而$ _POST不可用于JSON帖子。

此来源(https://davidwalsh.name/php-json)指出了如何将传入数据作为JSON处理:

# Get JSON as a string
$json_str = file_get_contents('php://input');

# Get as an object
$json_obj = json_decode($json_str);

更多的PHP专家可以在这方面纠正我。