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 echarts动画效果失效的问题。官网下载的例子。
  • ¥60 许可证msc licensing软件报错显示已有相同版本软件，但是下一步显示无法读取日志目录。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统，原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加