Question

我目前正在开发SharePoint 2013解决方案，我们正在广泛使用Javascript和jQuery。我遇到了一个令人烦恼的问题，我似乎无法弄明白。请记住，我过去没有多少使用过Javascript。

我的SharePoint解决方案中有一个图片库列表，其中包含使用Slides.js框架显示图片的webpart的图片。要检索图片，我必须使用Ajax从库列表中获取图片，然后将slidejs应用到.ascx文件中的div-container。

由于Ajax在准备就绪时返回数据，因此在将slide.js框架应用于标记中的无序列表时，我无法确定数据是否存在。数据可能存在，也可能不存在。你可能已经猜到了;如果它不存在，它根本不起作用。

为了避免出于演示目的，我添加了一个setTimeout，这样就不会应用slides.js，直到300ms已经过去了，但这是一个我想要摆脱的难看的修复。并且，它不稳定。

总而言之，我的问题基本上是;是否有可能安全地依赖Ajax数据一次出现，如果是这样，怎么样？

随意询问其他信息。

提前致谢。

修改 已添加代码

这是我的ajax选项

var ajaxOpts = {
    url: web + endpoint,
    type: "GET",
    headers: { "accept": "application/json;odata=verbose" },
    success: successHandler,
    error: errorHandler
}

还有successHandler

function successHandler (response) {
    // Do response parsing

    setTimeout(function () {
        runSlider(); // basically jQuery("#slider").slidesjs(slidesOpts)
    }, 300);
}

Answer 1

只要您的代码处于成功或完整回调状态，您就可以确保数据可用于此。

有两种方法可以获得成功并完成回调。在$ .ajax的选项中：

$.ajax("foo.php",{
    type: "get",
    success: function(data){
        // do something with data, it is available within this scope
    },
    complete: function(data){
        // do something with data, it is available within this scope
    }
})

或使用jqXHR的方法

$.ajax("foo.php",{
    type: "get"
}).done(function(data){
    // do something with data, it is available within this scope
}).always(function(data){
    // do something with data, it is available within this scope
});

注意，您也可以根据需要在代码周围传递xhr，以便您可以安全地在其他地方使用数据。

var jqXHR = $.ajax("foo.php",{
    type: "get"
});
$("#someEl").click(function(){
    jqXHR.done(function(data){
        // do something with data
        alert(data);
    });
});

Answer 2

如果您需要进行某种涉及ajax请求的“同步”，我会看到两个选项：

jQuery deferreds
Ajax async：您的请求中为false

我建议给出第一个更优雅，更高效的解决方案。 async：false可以冻结浏览器

用法示例：

jQuery推迟：

$.when(ajaxRequest).done(function(){
...//do stuff with sliders
});

or using async false:

$.ajax({
    url : "/controller/action",
    async : false,
    ...
    success: function(){
    ...// do stuff 
    }
})

如果您没有复杂的要求，请按照其他答案的建议进行操作，并在您的ajax success电话中执行操作

Answer 3

您可以在AJAX请求中使用success或complete回调。当AJAX完成时，运行你的功能将幻灯片放在滑块中。

$.ajax({
   type:'POST',
   url: myURL.php,
   dataType: "html",
   complete: function (data) {
       if (data !== null && data !== undefined) { // make sure data has been returned
           // add slides here
       } else {
           alert("Slides not available");
       }
   }, error: function() {
       alert("Slides not available");
   }
});

然后您可以确定当AJAX运行并且成功时，您添加幻灯片功能将按预期工作。

作为替代方案，你也可以像这样做一些更多的事情。如果您正在调用多个AJAX请求并且想要在完成工作之前知道两者何时完成，这将非常有用。

$.when(ajax1(), ajax2()).done(function(a1, a2) {
    // the code here will be executed when both AJAX requests complete
    // a1 & a2 contain lists of 3 items; the response text [0],
    // the status [1], and an jqXHR object [2] for each of the listed AJAX calls
    if (a1[0]) {
        // add slides here
    }
    if (a2[0]) {
        // do something else here
    }
});

function ajax1() {
    $.ajax({
        type:'POST',
        url: myURL.php,
        dataType: "html"
    });
}

function ajax2() {
    $.ajax({
        type:'POST',
        url: myURL.php,
        dataType: "html"
    });
}

如何安全地依赖Ajax数据

3 个答案: