Jquery公告滚动+AJAX后台得到数据

我来为您详细讲解"Jquery公告滚动+AJAX后台得到数据"的完整攻略。

1. 制作Jquery公告滚动

我们可以使用Jquery插件marquee.js来实现公告的滚动效果，使用它可以方便快捷地制作出炫酷的公告滚动效果。

1.1 引入css和js文件

首先，我们需要在html文件中引入marquee.js的css和js文件，下载后将它们保存到你的项目中，代码示例如下：

<link rel="stylesheet" href="marquee.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="marquee.js"></script>

其中，第一行是引入marquee.css文件，用于设置公告滚动的样式；第二行和第三行是引入Jquery和marquee.js，marquee.js依赖于Jquery，所以需要先引入Jquery。

1.2 编写滚动效果

完成了文件的引入后，我们需要编写相应的代码来制作公告滚动效果。代码示例如下：

<div class="marquee">
  <ul>
    <li>
      <a href="#">公告一</a>
    </li>
    <li>
      <a href="#">公告二</a>
    </li>
    <li>
      <a href="#">公告三</a>
    </li>
  </ul>
</div>

<script>
$('.marquee').marquee({
  duration: 10000,  // 滚动时间
  delayBeforeStart: 0,  // 开始时间
  duplicate: true,  // 是否循环
  pauseOnHover: true  // 鼠标放置在公告上是否暂停滚动
});
</script>

这里我们使用了一个marquee的div容器，ul中的li为要进行滚动的公告内容，使用$().marquee()方法就可以进行公告的滚动效果制作，其中duration、delayBeforeStart、duplicate和pauseOnHover属性可以根据自己的需要进行设置。

2. 使用AJAX请求后台数据

完成了公告滚动的制作后，我们需要使用AJAX来请求后台数据，使用后台数据来动态获取公告内容，实现更加灵活的公告展示效果。

2.1 编写请求后台数据的代码

首先，我们需要编写一个请求后台数据的函数，将获取到的数据填充到公告滚动中。代码示例如下：

  function loadNotice() {
    $.ajax({
      type: "GET",
      url: "/api/notice",
      dataType: "json",
      success: function (data) {
        var html = '';
        for (var i = 0; i < data.length; i++) {
          html += '<li><a href="#">' + data[i].title + '</a></li>';
        }
        $('.marquee ul').html(html);
      },
      error: function () {
        console.log('获取公告数据失败！');
      }
    });
  }

这里的$.ajax()方法是使用Jquery进行的AJAX请求，其中url属性是请求后台数据的接口地址，dataType属性是指定接收返回的数据类型，success属性是请求成功后的回调函数，将获取到的数据进行遍历拼接为html形式进行展示。

2.2 触发请求后台数据的事件

在编写好请求后台数据的代码后，我们需要在特定的行为触发后来触发请求后台数据的事件，这样才能动态地获取到最新的公告内容。代码示例如下：

  $(function(){
    loadNotice();
    setInterval(loadNotice, 60000);  // 1分钟向后台请求一次数据
  });

这里我们使用了一个定时器，每隔1分钟向后台请求一次数据，同时在页面加载时也会进行一次数据请求。

总结

"Jquery公告滚动+AJAX后台得到数据"的完整攻略就介绍到这里了，通过上述的示例代码您可以快速制作出一个炫酷的公告滚动，实现动态获取后台数据的效果。重点是要理解两部分的代码，分别是制作公告滚动和AJAX请求后台数据。希望对您有所帮助。