首页 > 技术文章 > JQ通过后台传来的数据生成二维码方法

fkcqwq 2019-07-09 16:58 原文

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
        <script src="https://img.huiyiguanjia.com/CDNFile/layer/layer-v3.1.1/layer/layer.js"></script>
        <script src="https://img.huiyiguanjia.com/cdnfile/public/publicfunction.js"></script>
        <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
    </head>
    <script type="text/javascript">
        mid = "4827262698575522532";
        TokenId = getCookie_Key('Auth_TokenID_9_' + mid, "tokenId");
        console.log(TokenId)
        if (!TokenId) {
            location.href = "login.html"
        }
        //通过将字符串转成数组拿到各项数据
        name = TokenId.split(",")[0];
        company = TokenId.split(",")[1];
        console.log(company)
    </script>
    <body>
        <div class="main">
            <section class="indexBox">
                <div class="logo"><img src="img/logo.png"></div>
                <div class="codeBox" style="color: #fff;">
                    <!-- 二维码容器 -->
                    <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
                    <!-- 二维码生成数字的容器 -->
                    <p class="codeNumber"></p>
                </div>
                <div class="bottomImg"><img src="img/shouyeBottomImg.png"></div>
            </section>
        </div>
    </body>
</html>
<script type="text/javascript">
    //生成二维码的方法
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 100,
        height: 100
    });

    function makeCode(qr) {
        var elText = document.getElementById("text");
        qrcode.makeCode(qr);
    }
    //请求数据后将请求的数据才能放到makeCode()方法中,所以要放到下边ajax里边  二维码生成库:https://www.runoob.com/try/try.php?filename=tryhtml5_QRCode
    // makeCode("55555");
    //请求数据
    $.ajax({
        type: "post",
        url: "http://testcustom.api.huiyiguanjia.com/api/meetinguser/GetMeetingUserInfonByTemp",
        dataType: "json",
        async: false,
        data: {
            mid: "4827262698575522532",
            name: name,
            company: company,
        },
        beforeSend: function() {},
        error: function() {
            layer.closeAll('loading');
            layer.msg("服务器错误", {
                icon: 7
            });
        },
        complete: function() {

        },
        success: function(data) {
            console.log(data);
            if (data.Code == 1) {
                //将得到的二维码数字赋值给要生成二维码的方法,makeCode();
                makeCode(data.Data[0].CheckCode);
                $(".codeNumber").html(data.Data[0].CheckCode); //将获取到的二维码数值放到页面的容器中
            } else {
                layer.msg('网络错误,请稍后重试', {
                    icon: 2
                });
            }
        }
    });
</script>

 

推荐阅读