javascript - Zend 框架中的 Ajax 搜索需要帮助

Question

我是网络编程新手，所以请耐心等待。我想要做的是让用户从 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 的博客

1. 为我的搜索操作创建了一个 AjaxContext。

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

3. 在我的表单中向 Dojo 组合框添加了 onChange 事件

4. 根据 W3Schools 示例创建了一个 JS 脚本来处理更改事件。

谁能帮我解决这个问题，我已经找遍了我能想到的所有地方，但仍然没有快乐。

我的搜索操作代码如下，我目前保留了检查提交按钮的操作，因为它使我不必刷新页面。

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

非常感谢任何帮助，因为这让我的头融化了，并且使我的项目陷入停顿，因为我需要其他模块的此功能。

谢谢

格雷厄姆

Answer 1

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