在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搜索，如果有可能單獨行動，顯示/處理您的搜索表單...