laravel中ajax+clipboard.js复制隐藏域的内容

简介php+ajax一键复制

一.前端代码

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
</head>
<body>
<input type="hidden" id="content" value="复制的内容"/>
<input type="button" id="copyUrl" value="请点击我复制"/>
<script>
//必须要初始化 第一种初始化
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#copyUrl').click(function () {

$.post('/ccc', {id: 1}, function (res) {//发送ajax
if (res.code == 1) {
a = res.tg_code
$('#content').val(a);//赋值到隐藏域中
var clipboard2 = new ClipboardJS('#copyUrl', {//调用clipboard.js
text: function () {
return $("#content").val();
}
});
clipboard2.on('success', function (e) {
console.log("已复制到剪贴板!");
});
clipboard2.on('error', function (e) {
});
alert("复制成功");
} else {
alert("服务器错误");
return;
}
}, 'json')
})
</script>
</body>
</html>

二.后端代码

public function ccc(){
return [
'code'=> 1,
'tg_code' => "http://www.qcqc.cc/AADCSA112"
];
}

三.路由

//php+ajax实现复制内容的测试路由

Route::get('/bbb','Home\LoginController@bbb');//页面路由
Route::post('/ccc','Home\LoginController@ccc');//ajax请求路由

 

文章评论

共有0条评论来说两句吧...

用户名:

验证码:

Top