使用单个 AJAX 调用加载两个 div答案

【问题标题】：Load two divs with a single AJAX call使用单个 AJAX 调用加载两个 div
【发布时间】：2017-02-15 10:54:36
【问题描述】：

我正在尝试使用 load() 通过单击按钮来加载两个 div #follow-x 和 #follow-y。这是我在 success 函数中尝试过的，但不起作用，但是如果我删除了其中一个函数，它会起作用，所以它只加载一个 div，但我希望它同时加载。提前致谢

$('#follow').click(function(){

          $.ajax({

                   type: "POST",
                   url: "{% url 'follow_class' %}",
                   data: {'pk': '{{class.pk}}' , 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                   dataType: "json",
                   success: function(){
                       $('#follow-x').load("{% url 'class_details' %} #follow-x");}
                       function(){
                       $('#follow-y').load("{% url 'class_details' %} #follow-y");}

              }); 
        });
</script>

别介意标签{}我正在使用Django

【问题讨论】：

为什么有两个独立的函数？为什么不直接做$('#follow-x').load(...); $('#follow-y').load(...);？
您的代码语法看起来不正确。主要是在您的第一次加载时关闭} 以及随机未命名和未调用的function () { 包装您的第二次.load。但是，当然最好只使用 $.ajax 然后从响应中提取两个 div，而不是发送两个并为每个 div 做同样的事情。

标签： javascript jquery ajax django

【解决方案1】：

success 上仅调用第一个函数

将两个语句放在一个函数中

$('#follow').click(function(){

          $.ajax({

                   type: "POST",
                   url: "{% url 'follow_class' %}",
                   data: {'pk': '{{class.pk}}' , 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                   dataType: "json",
                   success: function(){
                       $('#follow-x').load("{% url 'class_details' %} #follow-x");                        
                       $('#follow-y').load("{% url 'class_details' %} #follow-y");
                    }

              }); 
        });

【讨论】：

【解决方案2】：

你的第二个加载调用在另一个函数中永远不会被调用

$('#follow').click(function(){

          $.ajax({

                   type: "POST",
                   url: "{% url 'follow_class' %}",
                   data: {'pk': '{{class.pk}}' , 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                   dataType: "json",
                   success: function(){
                       $('#follow-x').load("{% url 'class_details' %} #follow-x");
                       $('#follow-y').load("{% url 'class_details' %} #follow-y");
                   }

              }); 
        });
</script>

【讨论】：

【解决方案3】：

成功是传递给 AJAX 的对象的属性。在您的代码中，您尝试将其分配给包含 follow-x 代码的函数，但是由于下一个违反 obj 结构的函数语句而产生语法错误。试试这个。

success: function(){
     $('#follow-x').load("{% url 'class_details' %} #follow-x");
     $('#follow-y').load("{% url 'class_details' %} #follow-y");
}

还可以考虑使用 done 回调而不是 success。更多信息请点击此处what is difference between success and .done() method of $.ajax

【讨论】：