jquery - 将 Json 结果转换为列表并显示在 jquery-confirm 警报中
问题描述
我正在编写一个执行 Ajax 调用并将数据作为 Json 返回的小脚本。
如果结果不为空,脚本会显示包含返回数据的警报。
这工作正常,但我想将数据显示为列表,我的问题是如何做到这一点?
json
["Baskerville Suite","Bolton Suite"]
jquery/ajax 调用
hotelid= "EXBHX";
$(document).ready(function() {
$.ajax({
type: "Post",
url: "../ipad_status.php",
data: { HotelID : hotelid },
success: function(data) {
var result = $.parseJSON(data);
console.log(result);
if(result != 0){
$.alert({
title: 'Room displays offline!',
content: 'Room(s): <BR/><BR/>' + result + '',
icon: 'fa fa-rocket',
animation: 'zoom',
boxWidth: '50%',
closeAnimation: 'zoom',
buttons: {
okay: {
text: 'View rooms',
btnClass: 'btn-blue',
action: function() {
window.top.location.href = '../confmon_a.php'
}
},
Close: function() {
text: 'Close'
}
}
});
}
}
});
});
非常感谢您抽出宝贵时间。
解决方案
假设使用了https://github.com/craftpip/jquery-confirm,那么只需像这样加入结果
'Room(s):<br/><br/>'+result.join('<br/>'),
或者
'Room(s):<br/><br/><ul><li>'+result.join('</li><li>')+'</ul>',
或链接它们:
var result = ["Baskerville Suite", "Bolton Suite"],
$list = $("<div/>").append("<ul/>");
$.each(result, function(i, text) {
$("<li/>").append(
$("<a/>", {
href: "../confmon_a.php?room=" + text.replace(/\s/g, "_")
}).text(text)
).appendTo($list)
})
$.alert({
title: 'Room displays offline!',
content: 'Room(s):<br/><br/>' + $list[0].innerHTML, // because $.alert wants html
icon: 'fa fa-rocket',
animation: 'zoom',
boxWidth: '50%',
closeAnimation: 'zoom',
buttons: {
okay: {
text: 'View rooms',
btnClass: 'btn-blue',
action: function() {
window.top.location.href = '../confmon_a.php'
}
},
Close: function() {
text: 'Close'
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
推荐阅读
- ios - 应用平移手势后如何在捏合手势上定位视图?
- python - 如何在pymunk和pyglet中让相机跟随汽车
- python - Python Django Celery,终止正在运行的任务不起作用
- php - 如何在 wordpress 帖子中列出存储在谷歌云存储桶中的文件?
- python-3.x - 如何在 lambda 中为 python3 赋值?
- flutter - Flutter Sembast 插入或更新
- php - Laravel 作业队列调度现在不会像往常一样失败
- javascript - 如何检查 x 和 y 是否在对象中?
- python - python中的输出与python3不同(相同的脚本)
- c++ - 在其特征向量上投影点云