javascript - 使用 AJAX 动态获取页面

Question

我有一个关于使用 AJAX 进行部分页面加载的问题。

假设用户单击一个按钮，该按钮进行 AJAX 调用来加载页面的一部分(可能包括动态加载的 JS 和/或 CSS)，并且 html 内容被放置在某个 div 上。然后，在第一次加载完成之前，他单击另一个按钮，该按钮进行另一个 AJAX 调用，将其他内容放到同一 div 上。我应该如何防止这种行为造成任何冲突？一些可能的冲突可能是这样的，例如，第一次加载对未找到的内容执行一些 JS，因为第二次加载已经更改了该 div。

提前致谢。

编辑:我希望得到基于异步方法的答案。谢谢。

Answer 1

Genesis 和 Gaurav 关于禁用用户交互的看法是正确的。我给他们每个人+1。如何处理逻辑实际上非常简单:

$('#my_submit_button').click(function(){
    $.ajax({
        url:'/my_file.php',
        dataType='json',
        beforeSend:function(){
            $('#my_submit_button').prop('disabled',true);
        },
        error: function(jqXHR, status, error){
            // handle status for each: "timeout", "error", "abort", and "parsererror"
            // Show submit button again:
            $('#my_ajax_container').html('Oops we had a hiccup: ' + status);
            $('#my_submit_button').prop('disabled',false);
        },
        success:function(data){
            $('#my_ajax_container').html(data);
            $('#my_submit_button').prop('disabled',false);
        }
    });
});