Javascript Zend框架中Ajax搜索所需的帮助

我是网络编程新手，所以请容忍我。我要做的是让用户从Dojo自动完成组合框中选择一个值，并将结果显示在同一页面上。我曾试图关注Phil Brown的优秀博客文章，但说实话，这远远超出了我的理解力，尤其是在JavaScript方面。我也尝试过实现，但没有效果，因为它会在第一次尝试时呈现我的整个页面和页面本身中的结果，并且在再次更改组合框中的值时，不会将任何内容传递给我的JS函数，因此我得到了未定义的XMLHttpRequest。 到目前为止，我一直在关注菲尔的博客

为我的搜索操作创建了AjaxContext

创建了一个search.ajax.phtml文件，并从我的search.phtml文件调用它

在我的表单中将onChange事件添加到我的Dojo组合框中

创建了一个JS脚本来处理基于W3S示例的更改事件

有人能帮我吗？我已经到处找了，但仍然没有找到快乐

我的搜索操作代码如下，我保留了检查提交按钮的操作，因为它阻止我刷新页面

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


  }

我的表格代码如下

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

任何帮助都非常感谢，因为这让我的脑袋融化了，我的项目也因此停止了，因为我需要其他模块的这个功能

谢谢

---

格雷厄姆

好吧，你需要先定位问题。看看它是在服务器端PHP还是JS上。熟悉萤火虫。了解发送到服务器的实际请求是什么，以及服务器是否返回预期结果。

---

是时候学习调试和帮助您的工具了。

既然您使用的是Dojo，您不妨使用它的内置功能

下面这句话有点奇怪：

$input=$_GET["input"];

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

首先，您应该使用适当的Zend框架方法，即使用$this->_getParam'input'；而不是访问$\u GET/$\u POST/$\u请求对应项

因此，将其替换为：

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

if (!is_null($input)) {

对于您的实际问题，我想无论如何：要从AJAX调用返回数据，您很可能应该确保Zend框架不会使用视图模板呈现数据，除非您使用单独的.phtml以正确的格式返回数据。因此，您应该使用$this->\u helper->viewRenderer->setNoRender关闭视图渲染器；如果您使用的是布局管理器，也可以禁用$this->\u 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搜索，而不是把它混合到显示/处理你的搜索表单的动作中…

不知道dojo，但是我很确定dojo有一个抽象层用于Ajax。为什么不用它来让事情变得简单呢？此外，我们需要查看您的HTML。您是如何触发您的请求的？如果您直接请求页面，请求是否有效？然后你可以删除PHP并包含相关的HTML bitHi johnP不，我也不知道Dojo，我对这个东西完全是新手。我将把表单和页面的代码添加到问题中。首先确认您的PHP工作正常并给出正确的结果。这样，我们就把我们的努力集中在世界的一部分problem@johnP，谢谢你的回复。我可以证实以下几点。1加载页面时，如果我在组合框中输入值，结果将与页面的其余部分一起再次显示，但是，由于页面本身正在呈现，因此组合框的进一步使用不起作用，我必须刷新页面以使其再次工作。2.如果我使用“提交”按钮，则每次只能完美地完成所有工作。还有什么我遗漏的吗？嗯，我刚刚注意到，当页面在其内部呈现时，组合框也会再次显示。如果我在页面的呈现部分选择combobox，自动完成操作将不起作用，但如果我键入几个字母并按enter键，页面将显示我希望的结果。我就是想不出如何从一开始就让它工作。