嗨,目前我有一個Zend php框架的應用程序,我大量使用json從控制器獲取數據。現在我不確定在JavaScript中解析json數據到hmtl的方式是否好。以下是我的示例代碼。更好的PHP與Json
控制器:
public function searchAction()
{
$search = $this->getRequest()->getParam('search');
$user = new Application_Model_User();
$userMapper = new Application_Model_Mapper_UserMapper();
$usersearch = $userMapper->findByString($search);
for($i=0; $i<count($usersearch); $i++)
{
$usersearch[$i]['pic'] = $this->view->getLoginUserImage($usersearch[$i]['social_id'],$usersearch[$i]['login_type'],null,null,square);
}
$this->_helper->json($usersearch);
}
查看:member.phtml
<div class="container">
<div class="clearfix page-header">
<h1 class="heading">Member Search</h1>
</div>
<div class="clearfix layout-block layout-a">
<div class="column column-alpha member-search-container">
<div class="search-input-container clearfix">
<form action="/member_search?query=" class="member-search-form" id="member-search-form" method="get" name="member_search_form" data-component-bound="true">
<fieldset>
<legend>Member Search</legend>
<label for="name_field">
<strong> Name</strong>
</label>
<span class="formNote">
(e.g. Bob Smith, Bob S.)
</span><br>
<input type="hidden" name="action_search" value="Search">
<input class="name-field" id="story-title" name="query" size="90" type="text" placeholder="search" autocomplete="off" style="width:220px;">
<div id="search-box"></div>
<div class="auto-name" style="display: none;"></div>
</fieldset>
</form>
</div>
<div class="member-search-results">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
});
$('#story-title').keyup(function(e){
var searchbox = $(this).val();
if(searchbox == '')
{
$(".similar_story_block").hide();
}else {
$.ajax({
url:"<?= $this->baseUrl('index/search')?>",
data:{'search':$('#story-title').val()},
dataType:"json",
type:"POST",
cache:false,
success:function(data){
if(data.length > 0)
{
var divHtml = '<div class="similar_story_block" style="display: block;">'+
'<div class="head">'+
'<p>People</p>'+
'<a href="#" id="close-element-form" onclick="javascript:closeSearchBoxMember(event)"></a>'+
'</div>'+
'<ul>';
for(var count=0; count<data.length;count++)
{
if(data[count]['reviews_num'] != null)
{
data[count]['reviews_num']
}
else
{
data[count]['reviews_num'] = 0
}
divHtml+='<li>'+
'<a class="pushstate no-confirm" href="' + baseUrl + 'user/' + data[count]['user_unique_name'] + '">'+
'<div class="image">'+
'<img alt="" src="'+data[count]['pic']+'">'+
'</div>'+
'<div class="fleft col-400">'+
'<p>'+ data[count]['name'] +'</p>'+
'<span>'+data[count]['reviews_num']+' Reviews</span>'+
'</div>'+
'</a>'+
'</li>';
}
divHtml += '</ul></div>';
$("#search-box").html(divHtml);
$(".search-box").show();
}
else {
$("#search-box").html('');
$(".search-box").hide();
}
}
}) }
});
function closeSearchBox(event)
{
disabledEventPreventDefault(event);
$(".similar_story_block").hide();
}
</script>
目前上面的代碼會做成員的實況查詢誰已經註冊的網站。代碼工作得很好,但我不確定這是否正確。下面是它的外觀鍍鉻調試控制檯
看來我暴露了太多的細節上。如果有人能夠提出更好的方式從控制器獲取數據,或者可以通過使用部分模板來完成,我們將不勝感激。 感謝您的幫助!
你可以讓它返回一個html視圖而不是數據。所以控制器可以獲取視圖並解析數據,然後將它回顯給你的ajax回調。 – brenjt
是的,我該怎麼做..?我需要一個有效的上述代碼示例.. – d3bug3r
@zlippr:請不要使用「有效」一詞,當你甚至沒有無效的解決方案。 – zerkms