使用Zend Framework管理AJAX调用

Question

I am trying to integrate an AJAX search function but I am having trouble getting the Zend Framework portion right. I have the following Controller and Action.

class IndexController extends Zend_Controller_Action
{   
    public function indexSearchAction()
    {
        $this->_helper->layout()->disableLayout();
        $this->_helper->viewRenderer->setNoRender(true);

        if ($this->getRequest()->isXmlHttpRequest()) {
            if ($this->getRequest()->isPost()) {
                $search = new Model_Index();

                $this->_helper->json($search->indexSearch());

                $this->view->indexSearch = $result;
            }
        } else {
            //regular controller logic goes here
            echo "regular controller";
        }

    }

Copy of my Ajax call is as follows:

$.ajax({
    type: "POST",
    url: "/index/index-search/format/json",
    data: dataString,
    dataType: "json", 
    cache: false,
    success: function(html)
    {

I just want the model to return a simple message to ensure that it is working up to this point. with that said, here is a copy of my function in the model:

public function indexSearch()
{
    $testMessage = "this was returned via ajax";
    return $testMessage;
}

Code that triggers the Ajax call:

$(document).ready(function(){
    $(".search").keyup(function() 
    {
        var searchbox = $(this).val();
        var dataString = 'searchword='+ searchbox;

        if(searchbox=='')
        {
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "/index/index-search/format/json",
                data: dataString,
                dataType: "json", 
                cache: false,
                success: function(html)
                {
                    $("#display").html(html).show();
                }

            });
        }
        return false;
    });
});

I dont know what I am missing, this is my first attempt to getting AJAX calls to work in ZF2 and its not working out.

Any help would be greatly appreciated! cheers!

Answer 1

The issue was that I was returning html when I was expecting json... I've since changed this:

here is the controller action:

 public function indexSearchAction()
{
     $this->_helper->layout('homelayout')->disableLayout();

    if ($this->getRequest()->isXmlHttpRequest()) {
        if ($this->getRequest()->isPost()) {

            $q=$_POST['searchword'];
            $indexSearch = new Model_Index();
            $result = $indexSearch ->indexSearch ($q);

            $this->view->indexSearch = $result;

        }
    } else {
        //regular controller logic goes here
    }

}

jQuery Ajax handling code:

$(document).ready(function(){

$(".search").keyup(function() {
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;

if(searchbox==''){
    $("#display").hide();
} else
{

$.ajax({
type: "POST",
url: "/user/user-search/",
data: dataString,
cache: false,
success: function(html)
{   $("#display").html(html).show();        }

});
}return false;    


});
    });

jQuery(function($){
   $("#searchbox").Watermark("Search");
    });

Model_index function indexSearch() script:

public function indexSearch($q)
{
    $select = $this->select()
                   ->from($this)
                   ->where('username LIKE ?', '%' . $q . '%');

    $row = $this->fetchAll($select);
    return $row;
}

Here is the input box element for users to search with:

<input type="text" class="rounded search" id="searchbox" /><br />

    <div id="display">

    </div>

view script (index-search.phtml) which displays the contents in the div:

<div class="display_box" align="left">
    <ul class="index-list">
        <?php echo $this->partialLoop('user/search-dropdown.phtml', $this->indexSearch);?>
    </ul>

and last but not least, the view script that is mentioned in the partial loop above that iterates through the returns contents of the database and into a format that can be displayed within the dropdown. below is search-dropdown.phtml:

<li class="user-list-item" >
<div class="search-list-item-container" >
<?php 

    $validator = new Zend_Validate_File_Exists();
    $validator->addDirectory('users/');
          if ($validator->isValid('/' . $this->username . '/' . $this->username . '.jpg')) { ?>
            <div class="search-list-item-picture">
                <img class='search-pic' src="..\users\<?=$this->username ?>\<?=$this->username ?>.jpg?t=<?=time(); ?>">
            </div>
    <?php } else {  ?>
            <div class="search-list-item-picture">
                <img class='search-pic' src="..\skins\blues\images\f1.png">
            </div>
    <?php }?>

    <div class="search-list-item-name">
        <?php echo $this->username; ?>
    </div>
</div>

The end result is as follows:

thanks to everyone who assisted here! MUCH APPRECIATED