BigKay 2023-02-13 10:58 采纳率: 58.8%
浏览 28
已结题

获取input内容作为变量:代码修改


  <input name='url' id='url' type='text' placeholder="input" />
 <input id="submit" type="button" value="sumbit" onclick="APP.dwz.setUrl(this)" />
//样式代码
.....
//样式代码结束

<script type="text/javascript">
    var APP = (function() {

        var dwz = {

                
                setUrl: function(self) {
                    var urlEl = document.getElementById('url'),
                        tips = 'https://',
                        request = {
                            url: urlEl.value
                        };
                    dwz.getJson('api.php', true, dwz.build_query(request), function(res) {
                        if (res.code == 0) {
                            urlEl.className = 'focus';
                            urlEl.value = res.dwz;
                        } else {
                            urlEl.className = '';
                            urlEl.value = '';
                            urlEl.setAttribute('placeholder', res.msg);
                            setTimeout(function() {
                                urlEl.setAttribute('placeholder', tips);
                            }, 5000);
                        }
                    });
                },
                build_query: function(obj) {
                    var str = [];
                    for (var p in obj) {
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                },
                // 获取 JSON 数据
                getJson: function(url, post, data, callback) {
                    var xhr = new XMLHttpRequest(),
                        type = (post) ? 'POST' : 'GET';
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            var json = JSON.parse(xhr.responseText);
                            callback(json);
                        } else if (xhr.readyState == 4) {
                            callback(false);
                        }
                    }
                    xhr.open(type, url, true);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send(data);
                }

            },

            init = function() {
                setTimeout(function() {
                    var el = document.getElementsByTagName('html')[0];
                    el.className = 'on';
                }, 10);
            };

        return {
            dwz: dwz,
            init: init
        }

    })();
    document.addEventListener('DOMContentLoaded', function() {
        APP.init();
    })
</script>

代码如上，希望在点击按钮生成短网址之后可以通过 phpqrcode.php 同时生成该短网址的二维码

  • 写回答

4条回答 默认 最新

  • WZZNB666 2023-02-13 12:19
    关注

    您可以在 dwz.getJson 回调函数中添加生成二维码的逻辑。

    首先，您需要在页面上添加一个元素，用于展示生成的二维码图片，例如：

    <div id="qrcode"></div>

    然后，您可以使用第三方库，例如 jQuery QRcode，来生成二维码：

    // 在 <head> 中引入库文件
<script src="https://cdn.jsdelivr.net/gh/jeromeetienne/jquery-qrcode@1.0/dist/jquery.qrcode.min.js"></script>

...

// 在 dwz.getJson 回调函数中添加以下代码：
dwz.getJson('api.php', true, dwz.build_query(request), function(res) {
  if (res.code == 0) {
    urlEl.className = 'focus';
    urlEl.value = res.dwz;
    
    // 生成二维码
    $('#qrcode').qrcode({
      text: res.dwz,
      width: 128,
      height: 128
    });
  } else {
    ...
  }
});

    这样，每次点击按钮生成短网址后，就会同时生成该短网址的二维码，并展示在页面的 #qrcode 元素中。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 2月24日
  • 已采纳回答 2月16日
  • 创建了问题 2月13日

悬赏问题

  • ¥15 做个有关计算的小程序
  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式（有相互嵌套）
  • ¥30 关于#算法#的问题：运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁，怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化