JavaScript Gallery to SPservices

Question

我在这里找到了不错的JavaScript画廊。我试图使用SPServices从Sharepoint库中获取数据。但没有用。我的代码有任何问题吗？

<script type="text/javascript" src="/Jscript/Jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="/Jscript/SPServices/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript" src="/Script/js/fotorama.js"></script>
<link rel="stylesheet" href="/Script/js/fotorama.css" />
<script language="javascript" type="text/javascript">
$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "2007PhotoAlbum",
    CAMLViewFields: "<ViewFields></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
	  
		
        var liHtml = "<div class='fotorama'><img src='" + "/photos/2007PhotoAlbum/" + $(this).attr("ows_PicFilename") +"'" + "></div>";
        $("#fotorama").append(liHtml);
      });
    }
  });
});
</script>
<div id="fotorama" data-width="700" data-ratio="700/467" data-max-width="100%"></div>
<script>
$('.fotorama').fotorama({
  width: 700,
  maxwidth: '100%',
  ratio: 16/9,
  allowfullscreen: true,
  nav: 'thumbs'
});
</script>

Answer 1

在运行库代码之前，SPServices 调用可能不完整。这使得 SPServices 看起来没有返回任何数据。您可以从检查 SPServices 是否返回数据开始。此代码会将输出写入页面。

$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "2007PhotoAlbum",
    CAMLViewFields: "<ViewFields></ViewFields>",
    completefunc: function(xData, Status) {
        /***********************************Debugging*******************************/
            var out = $().SPServices.SPDebugXMLHttpResult({
            node: xData.responseXML
            });
            $("#debug").html("").append("<b>This is the output from the GetList operation:</b>" + out);
        /***************************************************************************/
      $(xData.responseXML).SPFilterNode("z:row").each(function() {

        var liHtml = "<div class='fotorama'><img src='" + "/photos/2007PhotoAlbum/" + $(this).attr("ows_PicFilename") +"'" + "></div>";
        $("#fotorama").append(liHtml);
      });
    }
  });

只要这返回数据，我建议使用 promise 重写您的 SPServices 调用。然后在返回承诺后运行.fotorama。马克在这里比较了有承诺和没有承诺。