Question

我想知道是否有办法让jQuery只需一次调用即可加载多个HTML容器。例如：

.
<div id='one'></div>
<div id='two'></div>
.
.
<script type="text/javascript">
   jQuery("#one").load("somephpmodule.php", "",
        function(responseText, textStatus, XMLHttpRequest) {
             if(textStatus == 'error') {
                 jQuery('#one').html('There was an error making the AJAX request');
             }});
</script>
.

在上面的代码中，只会从div输出加载somephpmodule.php“one”。如何通过一个电话加载div“两个”？或者我只是需要发出多个电话？

Answer 1

我会这样做：

loadUserModules.php处理所有用户模块并返回一个数组，其中键是div ID（一，二，三等），值是您要添加到页面的HTML块。

这将是一个很大的调用来加载所有模块。

<script type="text/javascript">
$.getJSON('loadUserModuels.php', function(data) {
  $.each(data, function(index, value) { 
    $("#" + index).html(value); 
  });
});
</script>

Answer 2

将两个s放在一个新的空标签或另一个标签中，并带有id并加载它。

Answer 3

就个人而言，我会使用jquery.ajax函数返回带有两位信息的json，然后在客户端，我会得到脚本将json中的相应数据放入适当的div标签。

使用此方法，您可以拥有许多div标记，并且单个请求将以json形式返回所有数据，这可以很容易地在客户端放置。

Answer 4

您无需发出多个电话，只需格式化您的请求和响应即可。

示例，使用json。

  $.ajax( {
    url: url,
    dataType: 'json',
    data: data,
    success: function( response ) {
       $("#one").html( response.one );
       $("#two").html( response.two );
    }
   } );

Answer 5

function loadModules() {
    $('#section div[class="module"]').each(function() {
        var ajaxModule = $(this);
        $.ajax({
            url: 'modules/' + $(ajaxModule).attr('modulePage'),
            cache: false,
            type: 'post',
            async:true,
            success: function(data){
                if(data)
                    $(ajaxModule).html(data);
                else
                    $(ajaxModule).html('The page that you requested was not found.');
            }
        });
    });
}

您可以使用这样的功能。我是通过ajax为加载模块编写的。您可以像这样设置模块;

<div class="module" modulePage="MODULETEST.PHP"></div>

并打开此功能;

$(document).ready(function() {...});

它将加载所有模块。

顺便说一句，不要忘记ajax上的async：true语句。如果没有，当你同时加载3个或更多模块时，你的页面会冻结。通常是async：true语句是默认设置的，但是如果你像我这样在ajaxSetup函数上分配async：false，你就不必忘记了它。

祝你好运！

一个jQuery调用可以加载多个HTML容器吗？

5 个答案: