AJAX和头/脚更新最佳实践

Question

对我来说，标准设置是具有head.inc和foot.inc，然后通过AJAX调用在中间进行更新并进行一些转换。有点无聊，但是目前就是这样。我遇到的问题通常是在head.inc中的主要站点导航/菜单是上下文相关的，并且会根据正在查看的页面而改变。这可能会导致很多代码重复，因为1）我在PHP中使用PW编写了代码，因此如果直接访问该页面，它会得到反映； 2）如果通过AJAX调用访问该页面，我也必须在JS中执行相同的操作。你看到了困境。

我最近开始做的是在菜单的包含文件中构建一个PHP数组，并且也json_encode有了一个数组，该数组具有相同的代码，一个供PHP使用，一个供JS使用。类似于以下内容...

$menuArray = array();

$menuLeft = $pages->find("template=work|news, sort=sort");
$menuRight = $pages->find("template=clients|about, sort=sort");

if ($page->id !== 1) {
    $menuLeft->filter("id={$page->id}");
    $menuRight->filter("id={$page->id}");
}

foreach ($menuLeft as $item) {

    $menuArray['left'][] = array(
        'id' => $item->id,
        'name' => $item->name,
        'url' => $item->url,
        'title' => $item->title,
        'x' => '100%'
    );

    // If current page then prepend 'Close'
    if ($page->template->name == $item->name) {
        array_push($menuArray['left'], array(
            'name' => 'close',
            'url' => $pages->get(1)->url,
            'title' => 'Close',
            'x' => '100%'
        ));
    }

}

foreach ($menuRight as $item) {

    $menuArray['right'][] = array(
        'id' => $item->id,
        'name' => $item->name,
        'url' => $item->url,
        'title' => $item->title,
        'x' => '100%'
    );

    // If current page then append 'Close'
    if ($page->template->name == $item->name) {
        array_unshift($menuArray['right'], array(
            'name' => 'close',
            'url' => $pages->get(1)->url,
            'title' => 'Close',
            'x' => '100%'
        ));
    }

}

// Return JSON for JS (PHP can grab $menuArray directly)
$menuJSON = json_encode($menuArray);

if ($config->ajax) {
    echo '<script id="menuJSON">';
        echo "menuJSON = {$menuJSON}";
    echo '</script>';
}

然后在head.inc循环$menuArray和JS循环中，对AJAX进行更改，menuJSON。

updateMenu: function(e) {

    var $header = document.querySelector('header.main'),
        headerContent = '';

    for (var menu in menuJSON) {
        headerContent += '<ul class="menu --' + menu + '">';
        menuJSON[menu].forEach(function(item) {
            headerContent += '<li data-template-name="' + item.name + '"><a data-ajax data-x="' + item.x + '>" href="' + item.url + '">' + item.title + '</a></li>';
        });
        headerContent += '</ul>';
    }
    $header.innerHTML = headerContent;

}

我遇到的问题是我不知道这是否是处理此类问题的最佳方法，并且想知道是否有人提供了输入？

还感觉很奇怪，用PHP回显了脚本标签，然后依靠JS在DOM中找到它。你懂？

无论如何...我会把它放在那里，看看会发生什么

Answer 1

不确定当你说“动态内容”时你到底是什么意思，我肯定会选择 RESTFull 方法。如果您提供更多类型的详细信息（例如文本静态、视频或图像等），我会考虑更多详细信息。假设您的页面有动态内容，其中仅包含文本。

假设用户访问 url 为“/page/1”的页面，并且用户通过某种身份验证登录。

你可以有另一个restful api端点，它需要两个参数（可以有更多参数，为了简单起见，我将其保留为2）来用你想要返回的内容填充你的头部和页脚包含文件。这次我们将您的 api 端点命名为“/populateHeadAndFooter”。您可以为页面传递“1”，为令牌参数传递“{{token}}”。无论您对这些参数做什么，都可以评估情况并准备响应。如果您需要页面“1”的更多详细信息，例如用户输入或将采取的任何操作，您可以有一种机制将其作为参数直接传递或在将其转换为其他格式（散列、编码等）之后传递。之后，您可以使用 AJAX 来刷新您的实际页面。