EDIT

Question

我有2个ajax调用（一个用于获取标题内容，另一个用于获取图像内容）。两者都以JSON格式返回。为了渲染，我有2个车把模板。

问题是：只有一个把手模板被渲染（有时候会渲染标题，有时会渲染图像）。网址： http://www.devfolio.info/ankit/index.php

CODE： JS文件

function getPhotos(uid){
    var dataString = 'action=viewPhotobank&uid=' + uid;
    $.ajax({
        type:"POST",
        url: "/themesAssets/controller/actions.php",
        data: dataString,
        success: function(msg){
            response = JSON.parse(msg);
            if(response.statusPhotos == "success"){
                if(typeof(afterGetUserphotobank) != 'undefined'){
                    afterGetUserphotobank();
                } else{
                    var sourcePhotos   = $("#images-template").html();
                    var templatePhotos = Handlebars.compile(sourcePhotos);
                    $("#content").fadeOut(animationTime, function(){
                        $("#content").html(templatePhotos(response))
                        .fadeIn(animationTime);
                    });
                }
            }
        }
    });
}

function getHeaderData(uid){
    var dataString = 'action=getHeader&uid=' + uid;
    $.ajax({
        type:"POST",
        url: "/themesAssets/controller/actions.php",
        data: dataString,
        success: function(msg){
            response = JSON.parse(msg);
            if(response.statusHeader == "success"){
                if(typeof(afterGetSingleImage) != 'undefined'){
                    afterGetHeaderData();
                } else{
                    var sourceHeader   = $("#header-template").html();
                    var templateHeader = Handlebars.compile(sourceHeader);
                    $("#header").fadeOut(animationTime, function(){
                        $("#header").html(templateHeader(response))
                        .fadeIn(animationTime);
                    });
                }
            }
        }
    });
}

在主页上：

<body>
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
        <script>
            $(document).ready(function(){
                getHeaderData(<?= $uid ?>);
                getPhotos(<?=$uid?>);
            });
        </script>
        <?php
        require_once $rootFolder . '/themes/classy/headerTemplate.php';
        require_once $rootFolder . '/themes/classy/imagesTemplate.php';
        ?>
</body>


<?php
require_once '../../global.php';
require_once $rootFolder . '/classes/portfoliodata.class.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <?php
        $data = new portfolioData();
        $data->getViewport();
        $data->getCharset();
        $data->getCommonCSS();
        $data->getCommonJS();
        $data->getThemeCSS("classy", "grid");
        ?>
    </head>
    <body>
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
        <?php
        require_once $rootFolder . '/themes/classy/headerTemplate.php';
        require_once $rootFolder . '/themes/classy/singleImageTemplate.php';
        require_once $rootFolder . '/themes/classy/imagesTemplate.php';
        ?>
        <script>
            $(document).ready(function(){
                getHeaderData(<?= $uid ?>);
                getPhotos(<?= $uid ?>);
            });
        </script>
    </body>
</html>

Answer 1

EDIT

它使用相同的缓存响应来自任何一个AJAX调用赢得比赛。

在$.ajax();

之前，将其放入data:来电（所有）中

cache: false,

如果这不能让你快速解决，那我就睡觉了。永远。

这并不能让你摆脱将所有这些加入到一个电话中。只是想让你了解问题的原因来学习。事实上，这段代码需要轻微改造，一些聚合，绝对是popstates。

如果Handlebars没有结束你的一杯茶，我强烈建议Angular.js。基本相同的想法，但直接集成到HTML作为元素，属性等

这些AJAX调用是异步的 - 它们在加载另一个时并不关心，它们只是在加载时加载。

您可以通过以下方式阻止：

在一次AJAX调用中回复两件事（逻辑上）并使用success: function() {显示结果

或

您可以按照您希望加载的顺序在另一个success:内嵌入一个电话。

多个车把模板冲突

1 个答案:

EDIT

我不推荐第二种选择。

多个车把模板冲突

1 个答案:

~~~~~~ EDIT ~~~~~~

我不推荐第二种选择。

EDIT