时间戳

首页 > 解决方案 > AJAX 和头/脚更新最佳实践

javascript - AJAX 和头/脚更新最佳实践

问题描述

对我来说，标准设置是有一个 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 中找到它也感觉很奇怪。你知道？

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

标签： javascriptphpajax

解决方案

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

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

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

推荐阅读