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

该html变量将是您可以在<div class="member-search-results">div 中插入的已编译 HTML。

于 2012-10-19T03:30:09.737 回答
0

我认为如果您的项目有很多访问者并且经常使用此操作，您可以将此功能传递给他们。它可以减少服务器上的少量负载。但只有当您有很多访问者（综合浏览量）时，它才会起作用。但是，如果您的项目不是那么大，您将感觉不到差异，并且“PHP 方式”在我看来可能会更容易。

于 2012-10-19T07:05:28.377 回答