如何合并服务器端模板和 AJAX 以最大限度地提高可重用性

发布于 2024-12-06 13:55:59 字数 1979 浏览 2 评论 0原文

在讨论具体问题之前，请考虑以下一般问题：您使用服务器端模板（例如 Smarty）根据特定状态以特定方式生成页面。但是，您也可以使用 Javascript 动态更改状态并更新该页面。如何构建这样一个不涉及在 Javascript 和 PHP 中重复工作的系统？

现在，针对与上述相关的具体问题。我有一个教育网站的导航栏。根据用户提供的 URL，您可以处于不同的导航级别：字段、主题、课程、部分、课程。例如，如果用户访问以下 index.php?field=Social_Sciences，则 PHP 将返回并解析以下 XML，并将其发送到 Smarty，以便列出适当的主题：

<subjects>
    <subject>
    <id>81</id>
        <name>Sociology</name>
        <description>Sociology</description>
        <path>/data/material/Social_Sciences/Sociology/</path>
    </subject>
    <subject>
    <id>82</id>
        <name>Economics</name>
        <description>Economics</description>
        <path>/data/material/Social_Sciences/Economics/</path>
    </subject>
</subject>

同样，如果用户转到 index.php?field=Social_Sciences&subject=Economics，PHP 会解析以下内容并将其发送到 Smarty：

<courses>
    <course>
        <id>65</id>
        <name>Introduction to Microeconomics</name>
        <description>Introduction to Microeconomics</description>
        <path>
        /data/material/Social_Sciences/EconomicsIntroduction_to_Microeconomics/
        </path>
    </course>
    <course>
        <id>66</id>
        <name>Introduction to Macroeconomics</name>
        <description>Introduction to Macroeconomics</description>
        <path>
        /data/material/Social_Sciences/EconomicsIntroduction_to_Macroeconomics/
        </path>
    </course>
</courses>

现在，问题是用户还可以使用以下方式动态导航AJAX——也就是说，他们可以点击导航而无需重新加载页面。这意味着导航 XML 必须由 jQuery 解析，这意味着我必须编写相同的代码来解析 XML 两次——一次在 PHP 中，一次在 Javascript 中。在这个系统被证明很笨拙之后，我开始只使用 AJAX，即使在初始加载时也是如此，但这在速度和请求数量方面并不是最优的。（如果您认为这是微不足道的，我的代码中还有此类问题的其他示例。）如何继续使用 PHP 模板和动态 AJAX 更新，而无需用两种语言重新编写相同的解析代码两次？

原文

Consider the following general issue before I go to the specific problem: You use server-side templating (e.g. Smarty) to generate a page in a particular way depending on a particular state. However, you can also change the state and update that page dynamically using Javascript. How do you construct such a system that does not involve replicating one's work in both Javascript and PHP?

Now, for the specific question that relates to the above. I have a navigation bar for an educational website. Depending on the URL provided by the user, you can be at various levels of navigation: field, subject, course, section, lesson. For example, if the user accesses the following index.php?field=Social_Sciences, the following XML will be returned and parsed by PHP and sent to Smarty such that the appropriate subjects are listed:

<subjects>
    <subject>
    <id>81</id>
        <name>Sociology</name>
        <description>Sociology</description>
        <path>/data/material/Social_Sciences/Sociology/</path>
    </subject>
    <subject>
    <id>82</id>
        <name>Economics</name>
        <description>Economics</description>
        <path>/data/material/Social_Sciences/Economics/</path>
    </subject>
</subject>

Similarly, if a user goes to index.php?field=Social_Sciences&subject=Economics, PHP would parse the following and send it to Smarty:

<courses>
    <course>
        <id>65</id>
        <name>Introduction to Microeconomics</name>
        <description>Introduction to Microeconomics</description>
        <path>
        /data/material/Social_Sciences/EconomicsIntroduction_to_Microeconomics/
        </path>
    </course>
    <course>
        <id>66</id>
        <name>Introduction to Macroeconomics</name>
        <description>Introduction to Macroeconomics</description>
        <path>
        /data/material/Social_Sciences/EconomicsIntroduction_to_Macroeconomics/
        </path>
    </course>
</courses>

Now, the problem is the user can also dynamically navigate using AJAX--that is, they can click through the navigation without reloading the page. That means the navigation XML then has to be parsed by jQuery, which means I have to write the same code to parse the XML twice--once in PHP and once in Javascript. After this system proved unwieldy, I started only using AJAX even on the initial load but this is sub-optimal in terms of speed and number of requests. (If you think this is trivial, there are other examples of such issues in my code.) How can one continue to use PHP templating and dynamic AJAX updating without re-writing the same parsing code twice in both languages?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉宸 2024-12-13 13:55:59

JSON

如果您的 php 操作返回 JSON 对象，那么我会推荐 jQuery 的测试版产品 .template()< /a>

在完美的世界中，您使用的是 html 5，并且可以直接从服务器发送与您的 smarty 工作等效的 jQuery.template() 解析器，如您查看底部所示，可以在 pandora.com 的支持 html 5 的播放器上找到的页面源。它看起来像这样：

<!DOCTYPE html>

    <html>
    <head>
<!--- pilfered from jQuery.com's demo linked above --->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#aControl").click(function(event){
     $.get("/your/url").success(function(text, response, jQxhr){
        $("#iWillPrintACourseTemplate").tmpl(response).appendTo("#tbodyDestination");
     }).error(function(text, response, jQxhr){
     });
   });
});
</script>
</head>
<body>
<script id="iWillPrintACourseTemplate" type="text/x-jquery-tmpl"> 
  <tr class="detail"><td><p>stuff : ${id} - ${}</p><p>${description}</p><p>${path}</p></td></tr>
</script>
<div><a id="aControl" href='#'>click me</a></div>
<table>
<thead/>
<tfoot/>
<tbody id="tbodyDestination">
</tbody>
</table>
</body>
</html>

not html 5

then you have to move jQuery html 5

JSON

If you're php actions were returning JSON objects, then I would recommend jQuery's beta product .template()

In a perfect world, you're in html 5 and can send the jQuery.template() parser equivalents of your smarty work from the server outright, as found on pandora.com's html 5 enabled player if you look at the bottom of the page source. it will kind of look like this:

<!DOCTYPE html>

    <html>
    <head>
<!--- pilfered from jQuery.com's demo linked above --->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#aControl").click(function(event){
     $.get("/your/url").success(function(text, response, jQxhr){
        $("#iWillPrintACourseTemplate").tmpl(response).appendTo("#tbodyDestination");
     }).error(function(text, response, jQxhr){
     });
   });
});
</script>
</head>
<body>
<script id="iWillPrintACourseTemplate" type="text/x-jquery-tmpl"> 
  <tr class="detail"><td><p>stuff : ${id} - ${}</p><p>${description}</p><p>${path}</p></td></tr>
</script>
<div><a id="aControl" href='#'>click me</a></div>
<table>
<thead/>
<tfoot/>
<tbody id="tbodyDestination">
</tbody>
</table>
</body>
</html>

not html 5

then you have to move the jQuery html 5 <script type='text/x-jquery-tmpl'/> declaration into your javascript via a $.template("name", html with templating ${} in it); i would get the html with templating ${} stuff via an ajax call. Why? I would try to keep your html templates server side. to allow easy translation between a SMARTY template and a jQuery.Template() should their syntax ever diverge.

回复收藏 0 原文

~没有更多了~