2012-10-19 38 views
3

嗨,目前我有一個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> 

目前上面的代碼會做成員的實況查詢誰已經註冊的網站。代碼工作得很好,但我不確定這是否正確。下面是它的外觀鍍鉻調試控制檯

console debug

看來我暴露了太多的細節上。如果有人能夠提出更好的方式從控制器獲取數據,或者可以通過使用部分模板來完成,我們將不勝感激。 感謝您的幫助!

+0

你可以讓它返回一個html視圖而不是數據。所以控制器可以獲取視圖並解析數據,然後將它回顯給你的ajax回調。 – brenjt

+0

是的,我該怎麼做..?我需要一個有效的上述代碼示例.. – d3bug3r

+0

@zlippr:請不要使用「有效」一詞,當你甚至沒有無效的解決方案。 – zerkms

回答

1

您可以通過PHP呈現模板併發送HTML,也可以使用JavaScript發送JSON並呈現模板。

我會建議後者使用類似HandlebarsJS

定義HTML模板:

<script id="member-template" type="text/x-handlebars-template"> 
    <p>Name: {{ name }}</p> 
    <p>Role: {{ role }}</p> 
</script> 

我們的示例JSON數據:

var data = {"name": "Bob", "role": "Manager"}; 

渲染我們的模板,我們的JSON數據:

var template = Handlebars.compile($("#member-template").html()); 
var html  = template(data); 

html變量將是你的編譯您可以在您的<div class="member-search-results"> div中插入HTML。

+0

爲什麼你建議使用JS進行渲染?你依靠客戶端來正確解析它,並假設用戶已啓用JS。順便提一下,這是一個真正的問題,而不是試圖批評你。 –

+0

客戶端可能不會啓用JS,但這將是一個令人難以置信的數量的用戶。原始的海報正在詢問如何通過JavaScript正確呈現JSON數據。 – Alex

+0

是的。這是我的問題,如果有可能我想在控制器中創建一個html和數據,並使其通過JSON進行查看。 – d3bug3r

0

我想如果你的項目有很多訪問者,並且這個操作經常使用,你可以把這個函數轉發給他們。這可以減少服務器上的小負載。但只有當你有很多訪客(網頁瀏覽)時纔可以使用。但是,如果你的項目不是那麼大,你就不會感覺到它的差異,而且我認爲「PHP方式」會更容易。