Zend 框架中的 Ajax 搜索需要帮助答案

【问题标题】：Help needed with Ajax Search in Zend frameworkZend 框架中的 Ajax 搜索需要帮助
【发布时间】：2011-04-05 09:32:18
【问题描述】：

我是网络编程新手，所以请多多包涵。我想要做的是让用户从 Dojo 自动完成组合框中选择一个值，并将结果显示在同一页面上。我尝试关注 Phil Brown 的优秀博文 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()。到目前为止，我所做的是关注 Phil 的博客

为我的搜索操作创建了一个 AjaxContext。
创建了一个 search.ajax.phtml 文件并从我的 search.phtml 文件中调用它
在我的表单中向我的 Dojo 组合框添加了一个 onChange 事件
基于 W3Schools 示例创建了一个 JS 脚本来处理 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 文件如下所示，它是通过使用 echo 命令从 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;?>

非常感谢任何帮助，因为这让我头晕目眩，并且正在使我的项目停止，因为我将需要此功能用于其他模块。

谢谢

格雷厄姆

【问题讨论】：

不知道 Dojo，但我很确定 Dojo 有一个 AJAX 抽象层。为什么不使用它来让事情变得容易呢？此外，我们需要查看您的 HTML。你是如何触发你的请求的？如果您直接请求页面，请求是否有效？（然后您可以删除 PHP 并包含相关的 HTML 位）
嗨 johnP 不，我也不知道 Dojo，我完全是这个东西的新手。我会将表单和页面的代码添加到问题中。
确认您的 PHP 工作正常并首先为您提供正确的结果。这样我们就可以集中精力解决问题的一部分
@johnP，感谢您的回复。我可以确认以下内容。 1 在加载页面时，如果我在组合框中输入一个值，结果将再次与页面的其余部分一起显示，但是当页面在其内部呈现时，进一步使用组合框不起作用，我必须刷新页面让它再次工作。 2.如果我使用提交按钮，每次都只能完美运行。还有什么我遗漏的吗
嗯，我刚刚注意到，当页面在自身内部呈现时，组合框也会再次显示。如果我在页面的渲染部分选择组合框，则自动完成操作不起作用，但如果我输入几个字母并按 Enter，页面会显示我想要的结果。我只是不知道如何从一开始就让它发挥作用。

标签： javascript ajax zend-framework dojo

【解决方案1】：

嗯，您需要先定位问题。查看它是在服务器端（PHP）还是JS。熟悉 Firebug。找出发送到服务器的实际请求是什么，以及服务器是否发回预期的结果。是时候学习调试和帮助您的工具了。

【讨论】：

【解决方案2】：

既然你用的是Dojo，不如使用它内置的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 搜索使用单独的操作，而不是将其混入显示/处理您的搜索表单的操作中......

【讨论】：