$。Ajax加载HTML代码，然后像使用JQuery .load一样显示它。

Question

我有一个问题，因为我真的不明白...我有代码两个功能，一个工作，另一个没有，我真的很想了解为什么请...

当我这样做时：

$("#divLogin").load("./affichage/choixFormat.html", function() {
    $("#choix-box").fadeIn(300);
});

它工作正常，将HTML加载到DIV中并显示后。

但是我为我编写了一个最好的$ .Ajax脚本，但无效：

$.ajax({
        url: "./affichage/choixFormat.html",
        type: "POST",
        async: false,
        cache: true,
        dataType: "html",
        beforeSend: function() {
        $("#loading").removeClass("hide");
        },
        timeout: 5000,
        error: function(request, textStatus, errorThrown) {
            console.log(request.status);
        },
        success: function (msg, textStatus, request) {
        $("#divLogin").html(msg);
        }
    });
$("#choix-box").fadeIn(300);

JavaScript尝试在DIV完成加载前使其褪色，我认为...但是我不明白为什么...我选择了async：false！成功之后我就淡出了！

我更喜欢使用$ .Ajax，因为我们可以用它做更多的事情...谁能为我辩解为什么它不起作用？而且，JQuery .load运行良好：（

谢谢

---

[我错了，抱歉，这两种解决方案均无效:(我必须加载Divdivin两次以使其褪色：（

我也尝试做：

request.done(function(msg) {
    console.log("End of div loading");
    $("#choix-box").fadeIn(300);
});

但是它也不起作用:(我只有控制台中的日志。DOM太长，无法加载HTML，无法显示它...这就是为什么我必须第一次加载它，而第二次执行脚本的原因。

谁还有其他解决方案？

---

现在我尝试了很多事情……目前最好的方法是：

$('#div').ready( $("#div").fadeIn(300) );

但它也不总是完美的:(请问JQuery真的没有真正的解决方案吗？

---

确定，我的最后一个代码并不总是显示我的div :(有时是，有时是，无法理解为什么？

$('body').prepend('<div id="divChoiceFormat"></div>');
//getContenu('./affichage/choixFormat.html', 'divChoixFormat');

// CSS Load
appendCss("./style/choiceFormat.css", "choiceFormatCSS")

$("#divChoiceFormat").load("./affichage/choiceFormat.html", function() {

    // When ready
    $('#divChoiceFormat').ready( $("#choice-box").fadeIn(300) );
}

要在我制作HTML之前加载CSS：

function appendCss(url, id) {

    var link = $("<link>");
    link.attr({
        charset: "UTF-8",
        media:   "all",
        type:    'text/css',
        rel:     'stylesheet',
        id:      id,
        href:    url
    });
    $("head").append( link );

return false;
}

也许我的订单是假的？

我有一个问题，因为我真的不明白。。我有两个功能的代码，一个工作，另一个没有，我真的很想了解为什么……当我这样做时：$（“＃divLogin” ）.load（“。/ ...

Answer 1

// before sent

// call
$("#divLogin").load("./affichage/choixFormat.html", function( response, status, xhr ) {

    if ( status == "error" ) {
        console.log('Error : '+ xhr.status + " " + xhr.statusText);

    }else if(status == "success"){
        $("#divLogin").html(response);
        $("#choix-box").fadeIn(300);

    }else if(status == "notmodified"){
        console.log('Error : similar html detected'); 

    }else{
        console.log('Error : no status'); 
    }
});

Answer 2

将此$("#choix-box").fadeIn(300);放在ajax成功内部。