在Zend框架中使用Ajax搜索需要帮助

Question

我是网络编程的新手，所以请耐心等待。我想要做的是让用户从Dojo自动完成组合框中选择一个值，并将结果显示在同一页面上。我试图按照菲尔布朗的优秀博客文章http://blog.philipbrown.id.au/2011/03/awesome-pagination-with-zf-paginator-ajaxcontext-and-the-html5-history-api/，但说实话，这是我的头，特别是在JavaScript方面。我也试图实现http://www.w3schools.com/php/php_ajax_database.asp以及但无济于事，因为它呈现我的整个页面和结果在第一次尝试的页面本身和改变组合框中的值再次没有传递给我的JS函数（我得到XMLHttpRequest （）不确定。 我所做的到目前为止是以下菲尔的博客

1. 创建一个AjaxContext我的搜索行动。

2. 创建一个search.ajax.phtml文件，并把它称为从我search.phtml文件

3. 增加了onChange事件以我的形式到我的Dojo组合框

4. 创建一个JS脚本来处理基于W3Schools示例的on change事件。

任何人都可以请帮助我，我已经看到无处不在我能想到但仍然没有喜悦。

我的搜索动作代码在下面我一直保留检查提交按钮的动作，因为它阻止我刷新页面。

public function searchAction() 
{ 
    // Generate the form 
    $form = new PetManager_Form_SearchBreeds; 
    $this->view->form = $form; 

    $input=$_GET["input"]; 

    if($input=$_GET["input"]){ 
    $b=$input; 
     $q = Doctrine_Query::create() 
     ->from('PetManager_Model_Breeds b') 
     ->leftJoin('b.PetManager_Model_Pettype p') 
     ->addWhere('b.breed LIKE ?',"$b%"); 

     // Execute query and attach results to the view 
     $results=$q->fetchArray(); 
     $this->view->results=$results; 
    }else if($form->isValid($this->getRequest()->getParams())){ 
      $input = $form->getValues(); 
      $q = Doctrine_Query::create() 
      ->from('PetManager_Model_Breeds b') 
      ->leftJoin('b.PetManager_Model_Pettype p'); 

      // attach criteria to base query 
      if(!empty($input['breed'])){ 
      $b=$input['breed']; 

      $q->addWhere('b.breed LIKE ?',"$b%"); 
      } 

     // Execute query and attach results to the view 
     $results=$q->fetchArray(); 
     $this->view->results=$results; 
    } 

} 

我的JS代码如下

function getBreedDetails(str) 
{ 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
     // testing only window.alert("XMLHTTP Request"+str); 
    } 
    else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     // testing only window.alert("MICROSOFT.XMLHTTP Request"+str); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 

     document.getElementById("records").innerHTML=xmlhttp.responseText; 
     } 
    } 
xmlhttp.open("GET","/breeds/breed/search?input="+str,true); 
xmlhttp.send(); 

} 

我的表单的代码如下所示

public function init() 
{ 

    // Initialise form 

    $this->setAction('/breeds/breed/search') 
      -> setMethod('get'); 


    // Create a autocomplete input for breed name that fires an onChange event  
    $breedName = new Zend_Dojo_Form_Element_ComboBox('breed',array('onChange'=>"Javascript:getBreedDetails(breed.value)")); 
    $breedName->setLabel('Breed Name'); 
      $breedName->setOptions(array(
      'autocomplete' => false, 
      'storeId' => 'breedStore', 
      'storeType' => 'dojo.data.ItemFileReadStore', 
      'storeParams' => array('url' => "/breeds/breed/autocomplete"), 
      'dijitParams' => array('searchAttr' => 'breed') 
    )) 
      ->setRequired(true) 
      ->addValidator('NotEmpty', true) 
      ->addFilter('HTMLEntities')    
      ->addFilter('StringToLower')   
      ->addFilter('StringTrim'); 

    // create a submit button 
    $search = new Zend_Form_Element_Submit('submit'); 
    $search->setLabel('Search') 
      ->setOptions(array('class'=>'submit')); 


    // attach elements to the form 
    $this->addElement($breedName) 
     ->addElement($search);  


    } 

我search.ajax.phtml文件如下所示它是从所谓的仅使用回显命令的search.phtml文件

<?php if(count($this->results)):?> 
<div id="records"> 
    <table> 
    <tr> 
    <td class="key"> 
    Breed 
    </td> 
    <td class="key"> 
    Tpye 
    </td> 
    </tr> 
    <?php foreach ($this->results as $r):?> 
    <tr> 
    <td><?php echo $this->escape($r['breed']);?></td> 
    <td><?php echo $this->escape($r['PetManager_Model_Pettype']['type']);?></td> 
    <td><a href="<?php echo $this->url(array('id' => $r['breedID']), 'breeds-display'); ?>"> <img src='/images/view.png'/></a></td> 
    <td><a href="<?php echo $this->url(array('id' => $r['breedID']), 'breeds-update'); ?>"><img src='/images/updateico.png'/></a></td> 
    </tr> 
    <?php endforeach;?> 
    </table> 

    </div> 
    <?php else:?> 
    No Breeds Found 
    <?php endif;?> 

任何帮助非常感谢，因为这使我的头融化，并正在磨我的项目停下来，因为我将需要此功能的其他模块。

感谢

格雷厄姆

Answer 1

那么，你首先需要本地化的问题。看看它是在服务器端（PHP）还是JS。熟悉Firebug。找出发送给服务器的实际请求是什么以及服务器是否发回预期结果。 有时间学习调试和工具，可以帮助你。

Answer 2

由于您使用的道场，你还不如用其内置的Ajax功能...

而下面是很怪：

$input=$_GET["input"]; 

if($input=$_GET["input"]){ 

首先，你应该使用适当的Zend Framework方法，即。使用$this->_getParam('input');而不是访问$ _GET/$ _ POST/$ _ REQUEST对应项。

所以将其替换为：

$input = $this->_getParam('input'); 

if (!is_null($input)) { 

然后为您的实际问题（嗯，我想反正）：从您的AJAX返回的数据最有可能叫你应该确保Zend框架将不渲染数据使用视图模板（除非当然你会做一个单独的.phtml，以适当的格式返回数据）。因此，您应该使用$this->_helper->viewRenderer->setNoRender();关闭视图渲染器，并且如果您使用的是布局管理器，请禁用该视图渲染器$this->_helper->layout()->disableLayout();。在脚本结尾处以客户端脚本（很可能是JSON）预期的格式返回数据。

所以总结一下，您的AJAX搜索行动代码也许应该是如下：

$this->_helper->viewRenderer->setNoRender(); 
$this->_helper->layout()->disableLayout(); 

// fetch params & process, store results in $results 

$this->getResponse()->setBody(Zend_Json::encode($results)); 

哦，顺便说一句，你应该考虑的，而不是在动作混合它使用实际的AJAX搜索，如果有可能单独行动，显示/处理您的搜索表单...