Php 用动态内容填充页面的最佳方法
我已经思考了一段时间了，在一个示例中，假设我们有index.php，它有一大堆内容和一个搜索框，当用户向搜索框输入数据时，下面会显示结果，例如每个结果的图像和数据 填充这些结果的最佳方法是什么 示例一 AJAX Post to results.php，它响应完整的结果，包括 HTML和美学标签。然后回到第一页，包括 使用.html（data）返回的所有数据 示例二 拥有结果的框架并隐藏它们 div和每个结果包含的所有内容） 然后AJAX和检索数据，填充div并显示它们Php 用动态内容填充页面的最佳方法,php,jquery,Php,Jquery,我已经思考了一段时间了，在一个示例中，假设我们有index.php，它有一大堆内容和一个搜索框，当用户向搜索框输入数据时，下面会显示结果，例如每个结果的图像和数据 填充这些结果的最佳方法是什么 示例一 AJAX Post to results.php，它响应完整的结果，包括 HTML和美学标签。然后回到第一页，包括 使用.html（data）返回的所有数据 示例二 拥有结果的框架并隐藏它们 div和每个结果包含的所有内容） 然后AJAX和检索数据，填充div并显示它们 或者您可能有任何其他建议？
或者您可能有任何其他建议？如果结构没有改变，最好使用JSON并在本地JavaScript中填充 假设有一套书。大约100。如果要输出要更新的HTML，肯定要花很多钱。同时，您可以输出如下内容：
{
success:true,
rows:[{
"id":"1",
"title":"Office Space",
"director":"Mike Judge",
"released":"1999-02-19",
"genre":"1",
"tagline":"Work Sucks",
"coverthumb":"84m.jpg",
"price":"19.95",
"available":"1"
},{
"id":"3",
"title":"Super Troopers",
"director":"Jay Chandrasekhar",
"released":"2002-02-15",
"genre":"1",
"tagline":"Altered State Police",
"coverthumb":"42m.jpg",
"price":"14.95",
"available":"1"
},{
"id":"4",
"title":"American Beauty",
"director":"Sam Mendes",
"released":"1999-10-01",
"genre":"2",
"tagline":"... Look Closer",
"coverthumb":"12m.jpg",
"price":"19.95",
"available":"1"
},{
"id":"5",
"title":"The Big Lebowski",
"director":"Joel Coen",
"released":"1998-03-06",
"genre":"1",
"tagline":"The \"Dude\"",
"coverthumb":"49m.jpg",
"price":"21.90",
"available":"1"
},{
"id":"6",
"title":"Fight Club",
"director":"David Fincher",
"released":"1999-10-15",
"genre":"3",
"tagline":"How much can you know about yourself...",
"coverthumb":"94m.jpg",
"price":"19.95",
"available":"1"
}]
}
jQuery.parseJSON可以很好地解析这一点，并显示为
表lidiv第二个选项比IMHO好得多，使用JSON获取数据，并担心在检索数据后将其插入客户端。这样想：发送/接收的数据越少越好。 这里有两点
- 如果您只是传递JSON，并且您的视图必须在以后更改，那么代码更易于维护
- 对于开发人员来说，代码的可读性更高，如果他们只是传递JSON，他们可以更轻松地解决数据问题，而不必经历大量的布局HTML结构
您也可以使用js模板引擎，但到目前为止，我还没有找到一个能够在PHP和js中实现的 JSON是最好的选择，因为它发送的数据要少得多。一个直接来自Jquery文档的示例显示，您不需要为数据生成框架。正如您所看到的，您只需要创建一个容器来保存从javascript创建的元素<代码> $.getJSON（“http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { 标签：“雷尼尔山”， tagmode:“任何”， 格式：“json” }, 功能（数据）{ $.each（data.items，function（i，item）{ $("
这在index.php中
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images">
</div>
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: "mount rainier",
tagmode: "any",
format: "json"
},
function(data) {
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});</script>
</body>
</html>
$('#search').live('click',function(){
$.ajax({
url: 'result.php',
data: {keyword: $('#search_box').val()},
type: 'POST',
dataTupe: 'json',
success: function(response){
$('.result_box').html(response['data']);
}
});
});
希望这有帮助。但是如果我在页面上有20个结果的骨架，但是隐藏了，如果只返回了6个结果，我会显示一堆空骨架？我假设每个数据的骨架都是相同的，所以你应该只有一个，然后从Ajax得到的结果会重复，所以我有keleton在jquery中？或者隐藏在页面上？您可以选择其中之一。将骨架放在页面上，这在我看来更合适，然后是.clone（）它，或者你可以创建DOM元素。但是我会使用HTMLI中的隐藏框架，在设计上花费大量时间，每个结果都有多个标记，这不仅仅是一个图像标记，这会是一个问题吗？当然不是，这是一个非常基本的示例。有很多关于stackoverflow的示例，几乎完全符合你的需要。
$keyword = $_POST['keyword'];
$result = getResults($keyword);
die(json_encode(array('data'=>$result)));