Javascript 加载AJAX后触发Jquery滑块

我试着按照另一个问题中的建议去做，但可能语法不正确

当我单击一个div时，它触发一个JQuery调用——它调用一个AJAX函数，加载一个文档。AJAX调用必须返回服务器并获取一些计算量大的元素，因此我的想法是只有在AJAX调用完成将文档加载到目标

div

中时，JQuery滑块才能向下滑动。使用<代码>$。当。完成（…）会一直等到它完成，但它只是一直向下弹出

div

，而不是在第一次单击时给我一个漂亮的“幻灯片”

额外好处：当光标等待让用户知道发生了什么事情时，它希望将光标更改为一个小的“加载”或沙漏图标。但这并非完全必要

AJAX和Jquery：

function loadDoc(myUrl, id) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById(id).innerHTML =
                this.responseText;
        }
    };
    xhttp.open("GET", myUrl, true);
    xhttp.send();
}

$(document).ready(function () {

    $('.projSliderContent').hide();

    $('.projectSliders').on('click', function () {
        var targetArea = $(this).next('.projSliderContent');
        var urlToPass = $(targetArea).attr('url');
        var idOftarget = $(targetArea).attr('id');
        $.when(loadDoc(urlToPass, idOftarget)).done(   //fires AJAX func
            $(this).next('.projSliderContent').slideToggle("slow")
        );
    });
});

以下是HTML：

 <div class="container-fluid" id="userProjectsSelectors">
        <div class="row-fluid">   
                <h2 id="projSlidersHeader">PROJECTS</h2>
                <div class="projectSliders" id="projleadSlider">
                    <h3>View Projects You Lead</h3>
                </div>
                <div class="projSliderContent" id="userLeadProjectsDiv" url='/my/url/here'>
                </div>
        </div>
    </div>

项目
查看您领导的项目

这里是一个例子-它不能正常工作，但可能有助于可视化

你就快到了

问题是，您并不是在等待AJAX调用完成后才开始滑转

slideToggle

你应该使用延期付款

function loadDoc(myUrl, id) {
  var d1 = $.Deferred();
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById(id).innerHTML =
        this.responseText;
      d1.resolve();
    }
  };
  xhttp.open("GET", myUrl, true);
  xhttp.send();
  return d1;
}

请注意，我正在将延迟对象返回到

$。AJAX调用完成后，我将解析延迟，然后执行
.then（）
部分

了解更多关于

还有，你的小提琴坏了。您没有加载jQuery
您就快到了

问题是，您并不是在等待AJAX调用完成后才开始滑转
slideToggle

你应该使用延期付款

function loadDoc(myUrl, id) {
  var d1 = $.Deferred();
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById(id).innerHTML =
        this.responseText;
      d1.resolve();
    }
  };
  xhttp.open("GET", myUrl, true);
  xhttp.send();
  return d1;
}

请注意，我正在将延迟对象返回到
$。AJAX调用完成后，我将解析延迟，然后执行
.then（）
部分

了解更多关于

还有，你的小提琴坏了。您没有加载jQuery
$。when（）
需要承诺作为参数，但您的函数不返回承诺

可以将其简化为使用jqueryajax方法，这些方法会返回承诺

function loadDoc(myUrl, id) {    
  return $.get(myUrl).then(function(data) {
    $('#' + id).html(data)
  });    
}

或者更方便地使用jQuery
load（）
：

$。when（）
需要承诺作为参数，但函数不返回承诺

可以将其简化为使用jqueryajax方法，这些方法会返回承诺

function loadDoc(myUrl, id) {    
  return $.get(myUrl).then(function(data) {
    $('#' + id).html(data)
  });    
}

或者更方便地使用jQuery
load（）
：

为什么不使用
$.ajax
并将其放入
成功
调用中？@CumminUp07我对JQuery和ajax非常陌生，如果我误解了你，请原谅我。我在我的站点的多个地方使用了这种AJAX方法，但并不是所有地方都会触发滑块。如果可能的话，我想重用
loadDoc
方法，而不专门针对这个Jquery调用进行裁剪。为什么不使用
$.ajax
并将其放入
success
call？@CumminUp07我对Jquery和ajax非常陌生，如果我误解了你，请原谅我。我在我的站点的多个地方使用了这种AJAX方法，但并不是所有地方都会触发滑块。如果可能的话，我想重用
loadDoc
方法，而不必专门针对这个Jquery调用对其进行裁剪。在这一行中，`d.resolve（）；`你的意思是：`d1.resolve（）；`？return语句也是这样吗？这很有意义。但是在第一次单击时，滑块div`Thanke-修复了JSFIDLE。在这一行中，`d.resolve（）；`你的意思是：`d1.resolve（）；`？return语句也是这样吗？这很有意义。但是在第一次单击时，滑块div`That jQuery load（）正是我所要寻找的。干净，简单。非常感谢。jQuery load（）正是我想要的。干净，简单。非常感谢。