将 HTML 推送到网页（JS VS PHP）

Question

我只是对标题感到好奇，因为我一直在使用 PHP 加载我的搜索结果 HTML，现在我已经开始使用 javascript 来达到这个目的.

以前我在我的网站上执行以下操作以在页面上加载搜索结果

<?php
//example code
echo ' <div class = "container">
<div class = "box"> <p> Searh result e.g foo bar </p> </div>
 </div>'

?>

现在，当我调用 ajax 函数将搜索文本 post 发送到 PHP 页面时，上面的代码将起作用，并且该页面将 return 所有匹配的结果连同 HTML，jQuery 会将结果推送到我的页面

我现在正在做的是 post 通过 ajax 将搜索文本 PHP 发送到 PHP 页面，但这次不是 return 所有搜索结果打包在 HTML 标签中，它 return 一个 JSON 类型的数组，其中只有数据

现在，当我从 PHP 收到此数据数组时，我将其发送到自定义 (self-made) javascript 函数，该函数遍历数组并生成 HTML如下（例如）

 for (myData in data) 
    {
            results+='<li>'+
                '<div class="row">'+
                    '<div class="col-xs-12 col-sm-9 no-margin">'+
                        '<a href="">'+data[myData].name+'</a>'+
                        '<div class="price">'+
                            '<div class="">'+data[myData].price+'</div>'+
                        '</div>'+
                    '</div>'+
            '</li>';
    }

最后，变量 results 包含所有 HTML 以及随后通过 jQuery 追加推送到页面的数据。

所以在第一种方法中，所有工作都在服务器端完成，并且 return 正在处理大量数据，因为 HTML 标签将乘以数字结果 returned

而在第二种方法中，服务器只会 return 一个 JSON 类型的数据数组其余的工作将在客户端完成。所以问题是，第二种方法是否比第一种方法更好？

提前致谢

Answer 1

不是真正的答案...但它们都非常糟糕 :-/ 为什么不看看 Knockout.js 之类的东西。您可以使用 "json type array with only data in it" 更新您的视图模型，并且您的视图更新就像变魔术一样 ;-)

随便说！

Answer 2

这两种方法同样有效，但每种方法都需要考虑以下几点：

PHP

即使用户 JavaScript 已禁用

JavaScript

处理被卸载到客户端，减少服务器的负载。
- 实际负载量可以忽略不计，因为唯一的 "processing" 正在建设 HTML
流量较少，但如果您的服务器正在压缩响应（很可能是），那么这并不是真正明显的差异。
如果您使用 ajax，页面会更快、响应更快，因为它不必重新加载整个页面。
如果用户 JavaScript 已禁用，则无效。

最后，我会选择 JavaScript 除非你知道你有很多用户禁用它。

理想情况下，您会有一个无 JS 回退，其中 PHP 创建 HTML.

Answer 3

当你谈论简单的小型网站时，做你喜欢做的事...

当涉及到更复杂的应用程序时，您必须将数据与表示分开。所以我认为正确的方法是首先使用模板。

然后，您可以选择阵营：

客户端 会更好，当使用某些框架或您的应用程序时 HTML 会立即发生变化。您获得所需的数据并将其呈现在客户端上。使用模板引擎。

服务器端如果你需要构建大量具有一些困难逻辑的HTML并且需要它可能会很好一次或两次...

你也可以为双方使用相同的模板引擎，这样你就可以合并。

我认为，这总是关于多种方式的组合，因此请为这两种方式准备您的应用程序。（也许从一开始就为 REST 设计）

P.S。可能有帮助：Sharing Templates Between PHP and JavaScript

将 HTML 推送到网页（JS VS PHP）

Pushing HTML to a web page (JS VS PHP)

html

javascript

php

performance

jquery

PHP

JavaScript