ajax 创建
在本教程中，我们将研究在ProcessWire中设置一个简单的主题，我们将调查延迟的输出 （现在是ProcessWire中的默认主题策略），并设置我们的站点以使用AJAX请求新内容。
为了配合本教程，我创建了ProcessWire的新主题， 它同时使用了AJAX和延迟输出， 可以在Github上找到它们 。 您还可以在此处找到主题的演示： Artist Profile demo 。
直接和延迟输出
ProcessWire（PW）具有非常灵活的模板系统。 它允许您通过在/site/templates文件夹中创建php文件，然后在Setup>模板>添加new的ProcessWire管理员中关联它们，来对您选择的任何结构进行编码。 也就是说，在PW论坛中可以找到两种常见的模板策略： 直接输出和延迟输出 。
直接输出
直接输出在特定页面输出的命令中查看每个php文件。 如果每个模板都与其他模板大不相同，这可能会很棒。 但是，如果在每个模板中只需要很小的更改，我就会发现这很麻烦。 您可能还会发现自己从其他模板复制或包含许多文件。 这是一个非常基本的模板（例如basic-page.php）。
<?php
include("./_head.php");
echo "Your html content";
include("./_foot.php");
?>延迟输出
延迟输出会看到在模板文件（例如basic-page.php ） 之前调用的通用文件（例如_init.php）和_main.php。 您的_main.php用作标记（html）的_main.php ，特定模板降级为向_main.php文件中输出的预定义变量添加内容。
在下面的示例中，我将模板页面的正文和视频字段添加到变量$content ，并将页面标记输出到我的_main.php文件中，因为它始终在以后执行。
basic-page.php：
<?php
$content = $page->body . $page->video;
?>_main.php：
<?php
include("./head.inc");
?>
<div id="page">
<header class="">
<a id="logo" href="<?php echo $pages->get('/')->url; ?>">
<h1>
<?php echo $pages->get('/')->title; ?>
</h1>
</a>
</header>
<aside>
<nav>
<?php
// echo nav links
$children = $pages->get('/')->children;
foreach($children as $child){
echo '<a name="'.$child->title.'" class="ajax-link'.$class.'" href="'. $child->url .'">'. $child->title .'</a>';
}
?>
</nav>
</aside>
<div class="content-container cf">
<div class="content current-content">
<?php
// add content to page from template file
echo $content;
?>
</div>
</div>
<?php
include("./foot.inc");
?>艺术家简介
Artist Profile是使用延迟输出的主题的示例。 主要HTML结构 是在_main.php文件中编写的，包括页眉 ，页脚，徽标和导航。 当前页面模板设置$content变量，例如我的basic-page.php。
您可以安装Artist Profile，以查看如何将主题组合在一起并在main.js文件中使用AJAX。 我现在将逐步介绍该主题下的一些概念。
AJAX数据策略
AJAX允许我们向用户显示我们网站上的新内容，而无需重新加载常用的页面部分，如徽标，页脚和导航。 这也意味着在请求新页面时，我们的用户将永远不会看到空白的浏览器窗口。
使用AJAX，我们可以从我们的网站请求常见的数据类型，例如HTML，JSON或XML。 为简单起见，我们将向我们的网站请求HTML，但是，如果您创建或正在使用现有的前端模板库，我们可以请求JSON，从而减少每个请求的数据量（您有很多库可以在前端使用，例如胡须 ）。
在我们的主题中，我希望徽标，导航和页脚保持不变，但是当单击链接时，主要内容区域会动态（或异步）更改。
在我们的ProcessWire主题中使用AJAX
为此，我们需要创建两个容器HTML元素，可以在其中添加新内容。 容器元素将保持不变，但将保留内部元素和附加到其上的内容。 在将旧内容设置为动画后，将添加新内容，然后将其删除。 这将创建流畅的外观。
使用我的_main.php文件，容器如下所示：
<div class="content-container cf">
<div class="content current-content">
<?php
echo $content;
?>
</div>
</div> 好的，到目前为止很好。 现在让我们为方便的ProcessWire变量$ajax添加检查。 $ajax声明是否来自AJAX的请求。 这是检查是否不是AJAX的示例：
if(!$ajax): 在主题的_main.php文件中，我可以包装AJAX请求不需要的内容，即echo $content以外的所有echo $content 。 看起来像这样：
<?php
// include page structure if not an ajax request
if(!$ajax):
include("./head.inc");
?>
<div id="page">
<header class="">
<a id="logo" href="<?php echo $pages->get('/')->url; ?>">
<h1>
<?php echo $pages->get('/')->title; ?>
</h1>
</a>
</header>
<aside>
<nav>
<?php
// nav content here
?>
</nav>
</aside>
<div class="content-container cf">
<div class="content current-content">
<?php endif; // end if ajax ?>
<?php
// if ajax then only return $content
echo $content;
?>
<?php if(!$ajax): ?>
</div>
</div>
<?php
include("./foot.inc");
endif; // end if ajax
?> 现在，我们准备好了模板，可以在正常页面请求时为我们提供整个页面的标记，或者在AJAX请求时只为$content 。
使用jQuery AJAX在JavaScript中请求页面
我使用JavaScript库jQuery作为主题。 在链接到最新版本的jQuery库之后，我在foot.inc中引用了main.js文件。
使用jQuery的.on和.ajax函数，只要单击带有类.ajax-link的链接，我们就可以创建对新页面内容的AJAX请求。
到目前为止，我们的main.js代码如下所示：
$(function() {
var href;
var title;
$('body').on('click','a.ajax-link',function(e) { // nav link clicked
href = $(this).attr("href");
title = $(this).attr("name");
// load content via AJAX
loadContent(href);
// prevent click and reload
e.preventDefault();
});
function loadContent(url){ // Load content
// variable for page data
$pageData = '';
// send Ajax request
$.ajax({
type: "POST",
url: url,
data: { ajax: true },
success: function(data,status){
$pageData = data;
}
}).done(function(){ // when finished and successful
// construct new content
$pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>';
// add content to page
$('.content-container').append($pageData);
// remove old content
$('.content.current-content').remove();
// show new content and clean up classes
$(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content');
}); // end of ajax().done()
} // end of loadContent()
}); 上面的代码具有一个.on('click','a.ajax-link', function(){ OUR FUNCTIONS HERE }) ，它使我们可以在loadContent()单击链接时触发我们的loadContent()函数。 在loadContent()函数中，我们使用链接中的url发送ajax请求，然后在.done()将data附加到.content-container元素。
以上所有方法都可以正常工作，但是我们可以添加很多其他附加功能，以使所有内容无缝连接。
AJAX技巧，窍门和逻辑
首先，我们可以对内容进行动画处理（这链接到main.js文件的动画部分）。 动画非常适合制作光滑的网站，但也可以作为心理触发来突出显示某些更改。
接下来，我们要重新初始化页面所需的所有JavaScript函数，例如灯箱，幻灯片，砌体等，然后在将新HTML数据添加到页面后将其放入。 由于新内容是通过AJAX检索的，因此可能未与JavaScript监听器绑定以进行点击等，因此除非重新初始化页面上需要的任何功能，否则不会触发。
创建已经加载的检查对于防止无用的请求很有用。 添加快速检查以查看是否已单击新链接，然后return true; （如果有）阻止用户多次访问同一页面。
结语
使用上述某些策略，我们可以为我们的网站创建无缝的AJAX体验，并且使用ProcessWire，我们可以立即将AJAX请求集成到主题中。
有关ProcessWire和AJAX的更多信息，请查看我们的Envato Tuts +教程。
ajax 创建
