3

こんにちは現在、私はZend phpフレームワーク上のアプリを持っており、コントローラーからデータをフェッチするためにjsonを多用しています。今、私はjavascript内でjsonデータをhmtlに解析する方法が良いかどうかわかりません。以下は私のサンプルコードです。

コントローラ：

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>

現在、上記のコードは、すでにサイトにサインアップしているメンバーのライブクエリを実行します。コードは非常にうまく機能しますが、これが正しい方法であるかどうかはわかりません。以下は、Chromeデバッグコンソールでどのように表示されるかです

コンソールデバッグ

あまりにも多くの詳細を公開しているようです。誰かがコントローラーからデータをフェッチするより良い方法、または部分的なテンプレートを使用してそれを行う方法を提案できれば幸いです。ご協力いただきありがとうございます ！！！

4

2 に答える 2

1

PHP 経由でテンプレートをレンダリングして HTML を送信するか、JSON を送信して JavaScript を使用してテンプレートをレンダリングすることができます。

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);

変数は、divhtml内に挿入できるコンパイル済みの HTML になります。<div class="member-search-results">

于 2012-10-19T03:30:09.737 に答える
0

プロジェクトに多くの訪問者がいて、この操作で頻繁に使用される場合は、この機能を訪問者に中継できると思います。サーバーの負荷を少し減らすことができます。ただし、訪問者が非常に多い場合にのみ機能します（ページビュー）。しかし、プロジェクトがそれほど大きくない場合は、違いを感じることができず、「PHPの方法」の方が簡単だと思います。

于 2012-10-19T07:05:28.377 に答える