Php 为仪表板创建jQuery小部件的有效方法

我正在开发一个仪表板，供用户查看从MySQL数据库检索的统计数据和其他信息。一个页面上大约有10个小部件，我关心的是速度和效率。这些小部件是基本的jQuery帖子和JSON响应。。。请参阅下面的代码。这个方法行吗？还是有更好的办法？另外，我想稍后将这些小部件导入站点上的其他页面。如何做到这一点？简单的解决方案是包含JavaScript文件及其容器。但我希望尽可能地限制代码

JavaScript文件

function getLatest(mode) {ç
$.ajax({
type: "POST",
url: "./demo2/contents/updates/getLatest.php",
data: {mode:mode},
cache: false,
dataType: "json",
success: function(response){

NotifyPage('Retrieved '+response['count']+' records','success'); 
BlockPortlet('#kt_widget6_tab1_content','Loading..');
HidePortlet(1000,'#kt_widget6_tab1_content');

$("#latestContainer").html(response['data']);

}

});

}

PHP

PHP文件2

<a href="#" class="kt-notification__item">

 <div class="kt-notification__item-icon">
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon kt-svg-icon--brand">
 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 <rect x="0" y="0" width="24" height="24"/>
 <path d="M5,3 L6,3 C6.55228475,3 7,3.44771525 7,4 L7,20 C7,20.5522847 6.55228475,21 6,21 L5,21 C4.44771525,21 4,20.5522847 4,20 L4,4 C4,3.44771525 4.44771525,3 5,3 Z M10,3 L11,3 C11.5522847,3 12,3.44771525 12,4 L12,20 C12,20.5522847 11.5522847,21 11,21 L10,21 C9.44771525,21 9,20.5522847 9,20 L9,4 C9,3.44771525 9.44771525,3 10,3 Z" fill="#000000"/>
 <rect fill="#000000" opacity="0.3" transform="translate(17.825568, 11.945519) rotate(-19.000000) translate(-17.825568, -11.945519) " x="16.3255682" y="2.94551858" width="3" height="18" rx="1"/>
 </g>
</svg>
</div>

 <div class="kt-notification__item-details">
 <div class="kt-notification__item-title">
 <?=$fieldArray["title"]?>
 </div>
 <div class="kt-notification__item-time">
  <?=$fieldArray["timeAgo"]?>
 </div>
 </div>
 </a>

这种方法还可以。我个人喜欢以JSON的形式返回数据，并使用angular、backbone或vue等框架在浏览器中解析HTML，这样可以节省大量时间。你基本上是用php做这个服务器端，这也没问题，但可能不够灵活。。。也许您希望稍后实现的另一个小部件只是有点不同。例如，在再次阅读您的问题时，您实际上在问什么？谢谢Vincent。你能解释一下“使用angular这样的框架在浏览器中解析HTML”吗？我的第二个问题是，如何在其他页面中以尽可能少的代码导入这些小部件。使用angular或其他框架，我的意思是只从PHP端返回JSON格式的数据，并担心浏览器中的HTML。这样，当您需要另一个页面上的小部件时，只需调用生成小部件的javascript即可。就像你现在一样。

<a href="#" class="kt-notification__item">

 <div class="kt-notification__item-icon">
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon kt-svg-icon--brand">
 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 <rect x="0" y="0" width="24" height="24"/>
 <path d="M5,3 L6,3 C6.55228475,3 7,3.44771525 7,4 L7,20 C7,20.5522847 6.55228475,21 6,21 L5,21 C4.44771525,21 4,20.5522847 4,20 L4,4 C4,3.44771525 4.44771525,3 5,3 Z M10,3 L11,3 C11.5522847,3 12,3.44771525 12,4 L12,20 C12,20.5522847 11.5522847,21 11,21 L10,21 C9.44771525,21 9,20.5522847 9,20 L9,4 C9,3.44771525 9.44771525,3 10,3 Z" fill="#000000"/>
 <rect fill="#000000" opacity="0.3" transform="translate(17.825568, 11.945519) rotate(-19.000000) translate(-17.825568, -11.945519) " x="16.3255682" y="2.94551858" width="3" height="18" rx="1"/>
 </g>
</svg>
</div>

 <div class="kt-notification__item-details">
 <div class="kt-notification__item-title">
 <?=$fieldArray["title"]?>
 </div>
 <div class="kt-notification__item-time">
  <?=$fieldArray["timeAgo"]?>
 </div>
 </div>
 </a>