JQ通过后台传来的数据生成二维码方法

复制代码
<!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>
复制代码

 

posted @   夏小夏吖  阅读(1443)  评论(1编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
· 重磅发布!DeepSeek 微调秘籍揭秘,一键解锁升级版全家桶,AI 玩家必备神器!
点击右上角即可分享
微信分享提示