<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 同时生成该短网址的二维码
您可以在 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 元素中。
把“phpqrcode” 需要的参数 传进去