前端使用jquery.qrcode生成二维码

最新推荐文章于 2025-06-21 10:56:22 发布

原创最新推荐文章于 2025-06-21 10:56:22 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

JS实用代码专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何利用jQuery和jQuery QR Code插件在网页中生成自定义的二维码。通过简单的步骤即可实现，包括引入必要的JS文件、创建承载二维码的HTML元素及使用jQuery方法生成二维码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在页面引入jq和jq.qrcode

<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>

2.加一个承载二维码的容器

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

3.在必要的地方生成二维码

$("#qrcode").qrcode({
	width: 100, //宽度
	height: 100, //高度
	foreground: "#FFFFFF",//二维码颜色
	background: "#45C8E4",//背景色
	text: "https://www.baidu.com/" //任意内容
});

调用后台的ajax之后生成二维码

$.ajax({
	type: "post",
	url: $http + "index.php?m=Api&c=Member&a=my_qrcode",
	xhrFields: {
		withCredentials: true
	},
	success: function(res) {
		$(".z_fx_mycode").qrcode({
			width: 100, //宽度
			height: 100, //高度
			foreground: "#FFFFFF",
			background: "#45C8E4",
			text: res.data.qrcode //任意内容
		});
	}
});

附：GitHub地址 jquery-qrcode