0

我正在编写一个执行 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'
          }
        }
      });
    }
  }
  });
});

非常感谢您抽出宝贵时间。

4

1 回答 1

2

假设使用了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>

于 2018-08-13T07:17:15.753 回答