使用选择下拉过滤器CakePhp进行Ajax搜索

时间:2014-05-09 11:35:14

标签: jquery ajax cakephp cakephp-2.3

我想用下拉选择框构建一个ajax searc过滤器。 我会努力尽可能地清楚。

我有一个类型学模型和控制器。类型学有

id |标题|描述| item_id | condition_id | category_id | condition_id |价

其中 id 是主键, item_id,condition_id,category_id,condition_id 是外键。

因此,当加载类型学索引页面时,它会显示所有类型的列表。

搜索表格如下:

<form name="search_form" id="search_form">  
                <li><p>tipologia</p>                     
                <?php    
                echo "<select name=\"typology_categories\" class=\"select_filter\" >";
                echo "<option value=''>All</option>";
                    foreach ($typologyCategories as $typologyCategory): 
                        $category_id = $typologyCategory['TypologyCategory']['id'];
                        $category_name = $typologyCategory['TypologyCategory']['name'];
                        echo "<option value='{$category_id}'>{$category_name}</option>";
                    endforeach;
                echo "</select>";                                   
                ?>
                </li>

                <li><p>localita</p>
                <?php 
                echo "<select name=\"item_locations\" class=\"select_filter\">";
                echo "<option value=''>All</option>";
                    foreach ($itemLocations as $itemLocation): 
                        $item_id = $itemLocation['ItemLocation']['id'];
                        $item_name = $itemLocation['ItemLocation']['name'];
                        echo "<option value='{$item_id}'>{$item_name}</option>";
                    endforeach;
                echo "</select>";
                ?>
                </li>
                <li><p>prezzo</p>
                    <select name="typology_price" class="select_filter">
                        <option value="">All</option>
                        <option value="1">0 - 1,000</option>
                        <option value="2">1,000 - 5,000</option>
                        <option value="3">5,000 - 50,000</option>
                        <option value="4">50,000 - 100,000</option>
                        <option value="5">100,000 - 500,000</option>
                        <option value="6">500,000 - 1,000,000</option>
                        <option value="7">more then 1,000,000</option>
                    </select>
                </li>
                <li><p>stato</p>
                <?php 
                echo "<select name=\"typology_conditions\" class=\"select_filter\">";
                echo "<option value=''>All</option>";
                    foreach($typologyConditions as $typologyCondition):
                        $condition_id = $typologyCondition['TypologyCondition']['id'];
                        $condition_name = $typologyCondition['TypologyCondition']['name'];
                        echo "<option value='{$condition_id}'>{$condition_name}</option>";
                    endforeach;
                echo "</select>";
                ?>
                </li>
                </form>

ajax调用是:

    <!-- HERE IS THE SEARCH FILTER -->
    <script type="text/javascript" >
        $(document).ready(function () {
            $('.select_filter').bind("change keyup input",function() {
              $.ajax({
                   type: "POST",
                   url: "search.php", // This one should sent data to index action of the typology controller for processing
                   data: $("#search_form").serialize(), 
// You will get all the select data..
                    success:function(data){
                        $("#projects").html(data);
                    }
                });
          });
        });
    </script>

类型控制器是这样的: 索引行动:

/**
 * index method
 *
 * @return void
 */
    public function index() {
        $this->set('title_for_layout', 'CESI');
        $this->layout='Homepage';

             // Typology Query
        $typologies = $this->Typology->find('all', array('recursive'=>-1, 'order' => array('Typology.' . $this->Typology->primaryKey . ' DESC')));
        $this->set('typologies', $typologies);

             // Typology Category Query
        $typologyCategories = $this->TypologyCategory->find('all', array('recursive'=>-1));
        $this->set('typologyCategories', $typologyCategories);
             // Typology Condition Query

        $typologyConditions = $this->TypologyCondition->find('all', array('recursive'=>-1));
        $this->set('typologyConditions', $typologyConditions);

            // Item Query       
        $items = $this->Item->find('all',array('recursive'=>-1));
        $this->set('items', $items);

            // Item Location Query
        $itemLocations = $this->ItemLocation->find('all', array('recursive'=>-1));
        $this->set('itemLocations', $itemLocations);

            // Slider Query
        $sliders = $this->Slider->find('all', array('recursive'=>-1));
        $this->set('sliders', $sliders);
    } 

所以我想用于我构建的搜索的查询是这样的:

<?php 
  /* Query for the Typology*/
          $queryTypologies = "SELECT * ";
          $queryTypologies .= "FROM typologies";
          $queryTypologies .= " WHERE  1=1 ";

        if (isset($_POST['typology_categories']) && !empty($_POST['typology_categories']) && $_POST['typology_categories']!='') {
           $queryTypologies .= " AND typology_category_id = (SELECT id FROM typology_categories WHERE id ='".trim(mysql_prep($_POST['typology_categories']))."' LIMIT 1)";
        }

        if (trim($_POST["item_locations"])!='' && !empty($_POST['item_locations'])) {
            $queryTypologies .= " AND item_id = (SELECT id FROM items WHERE item_location_id ='".trim(mysql_prep($_POST['item_locations']))."' LIMIT 1)";   //'".trim(mysql_prep($_POST['item_locations']))."'
        }
                            // value="1" 0         - 1,000
                            // value="2" 1,000     - 5,000
                            // value="3" 5,000     - 50,000
                            // value="4" 50,000    - 100,000
                            // value="5" 100,000   - 500,000
                            // value="6" 500,000   - 1,000,000
                            // value="7" more then - 1,000,000

        if (trim($_POST["typology_price"])!='' && !empty($_POST['typology_price']) && $_POST['typology_price']!='') {

            if (trim($_POST["typology_price"]) == 1) {  
                $queryTypologies .= " AND price <= 1000";                           
            }
            if (trim($_POST["typology_price"]) == 2) {  
                $queryTypologies .= " AND price BETWEEN 1001 AND 5000";                         
            }
            if (trim($_POST["typology_price"]) == 3) {  
                $queryTypologies .= " AND price BETWEEN 5001 AND 50000";                            
            }
            if (trim($_POST["typology_price"]) == 4) {  
                $queryTypologies .= " AND price BETWEEN 50001 AND 100000";                          
            }
            if (trim($_POST["typology_price"]) == 5) {  
                $queryTypologies .= " AND price BETWEEN 100001 AND 500000";                         
            }
            if (trim($_POST["typology_price"]) == 6) {  
                $queryTypologies .= " AND price BETWEEN 500001 AND 1000000";                            
            }
            if (trim($_POST["typology_price"]) == 7) {  
                $queryTypologies .= " AND price > 1000000";                         
            }
        }


        if (trim($_POST["typology_conditions"])!='' && !empty($_POST['typology_conditions']) && $_POST['typology_conditions']!='') {
            $queryTypologies .= " AND typology_condition_id = '".trim(mysql_prep($_POST['typology_conditions']))."' ";  
        }

          $typologies = mysql_query($queryTypologies) or die (mysql_error());

            $numrows = mysql_num_rows($typologies);
                        if($numrows != 0){
                                $result ="";
                                    while($rowTypologies= mysql_fetch_assoc($typologies)){

                                        $id                    = $rowTypologies['id'];
                                        $item_id               = $rowTypologies['item_id'];
                                        $title                 = htmlentities($rowTypologies['title'], ENT_COMPAT, "UTF-8");
                                        $description           = htmlentities($rowTypologies['description'], ENT_COMPAT, "UTF-8");
                                        $thumbnail             = htmlentities($rowTypologies['thumbnail'], ENT_COMPAT, "UTF-8");
                                        $price                 = htmlentities($rowTypologies['price'], ENT_COMPAT, "UTF-8");
                                        $typology_category_id  = htmlentities($rowTypologies['typology_category_id'], ENT_COMPAT, "UTF-8");
                                        $typology_condition_id = htmlentities($rowTypologies['typology_condition_id'], ENT_COMPAT, "UTF-8");

                                         if (strlen($description)>303) {
                                            $short_description = substr($description, 0, 300);
                                            $description = $short_description."...";
                                         }

                                        $first = base64_encode($item_id);
                                        $typologyThumbnails = "admin/app/webroot/img/uploads/typology/thumbnails/" . $thumbnail;
                                        $result .= "<div class=\"item_shadow\">";
                                        $result .= "<div class=\"item\" style=\"background-image:url({$typologyThumbnails});\">";
                                        $result .=  "<div class=\"item-content\">";
                                        $result .=      "<div class=\"item-top-content\">";
                                        $result .=          "<div class=\"item-top-content-inner\">";
                                        $result .=              "<div class=\"item-top-title\">";
                                        $result .=                      "<h4>{$title}</h4>";
                                        $result .=              "</div>";
                                        $result .=          "</div>"    ;
                                        $result .=      "</div>";
                                        $result .=      "<div class=\"item-add-content\">";
                                        $result .=          "<div class=\"item-add-content-inner\">";
                                        $result .=              "<div class=\"description-inner\">";
                                        $result .=                  "<p>{$description}</p>";
                                        $result .=              "</div>";
                                        $result .=              "<div class=\"read-more-inner\">";
                                        $result .=                  "<a href=\"new.php?id=$first\">maggiori informazioni <img src=\"img/elenco.png\"/></a>";
                                        $result .=              "</div>";
                                        $result .=          "</div>";
                                        $result .=      "</div>";
                                        $result .=  "</div>";
                                        $result .= "</div>";
                                        $result .= "</div>";

                                    }
                                echo $result;
                            } else {
                            echo "No Result Found in Database.";
                        }    
 ?>

我知道这是有效的,因为首先我在原始的PHP编码上构建它,你可以自己看到它,它工作完美但现在我想在cakephp上实现它。我还没有找到办法。

任何帮助都会得到很多帮助!

提前完成

3 个答案:

答案 0 :(得分:1)

正如我通过教程和Cakephp Cook Book搜索的那样。我达到的最好的骚动是:

首先:阻止aJax进行搜索的是安全组件。由于cakephp中的Forms生成一个唯一的令牌。每次提交它应该是一个不同的,所以因为我使用ajax它产生错误。所以我禁用了

public function beforeFilter() {    
     parent::beforeFilter();
        // Controller spesific beforeFilter
        $this->Auth->allow('search');
         if ($this->action == 'search') {
            $this->Security->validatePost = false;
            $this->Security->csrfCheck = false;

            if (!$this->RequestHandler->isAjax()) {
                $this->Security->blackHole($this, 'You are not authorized to process this request!');
                $this->redirect(null, 401, true);
            } 
        }
    }

然后我使用了查询(); cakephp的方法,因为我的查询很复杂,并且它也使用了连接和条件。所以search()函数如下。

应用程序/控制器/ ControllerName

/**
 * aJax search method
 *
 * @return void
 */
    public function search() {
    $this->autoRender = false;
        if ($this->request->is('post')) {
            if(!empty($this->data)){
                if ($this->request->is('ajax')) {

          /* Query for the Typology*/
          $queryTypologies  =" SELECT *";
          $queryTypologies .=" FROM typologies AS Typology";
          $queryTypologies .=" LEFT JOIN items as Item";
          $queryTypologies .=" ON Item.id = Typology.item_id";
          $queryTypologies .=" WHERE Item.published=1 AND Typology.published=1";          

        if (isset($this->data['Typology']['typology_categories']) && !empty($this->data['Typology']['typology_categories']) && $this->data['Typology']['typology_categories']!='') {
           $queryTypologies .= " AND Typology.typology_category_id ='".$this->request->data['Typology']['typology_categories']."'";
        }
        if (trim($this->data['Typology']['item_locations'])!='' && !empty($this->data['Typology']['item_locations']) && $this->request->data['Typology']['item_locations']!='') {
            $queryTypologies .= " AND Typology.item_id=(SELECT id FROM items AS Item WHERE Item.item_location_id='".$this->request->data['Typology']['item_locations']."' LIMIT 1)";
        }
        if (trim($this->request->data['Typology']['typology_price'])!='' && !empty($this->request->data['Typology']['typology_price']) && $this->request->data['Typology']['typology_price']!='') {

            if (trim($this->request->data['Typology']['typology_price']) == 1) {    
                $queryTypologies .= " AND Typology.price <= 1000";                          
            }
            if (trim($this->request->data['Typology']['typology_price']) == 2) {    
                $queryTypologies .= " AND Typology.price BETWEEN 1001 AND 5000";                            
            }
            if (trim($this->request->data['Typology']['typology_price']) == 3) {    
                $queryTypologies .= " AND Typology.price BETWEEN 5001 AND 50000";                           
            }
            if (trim($this->request->data['Typology']['typology_price']) == 4) {    
                $queryTypologies .= " AND Typology.price BETWEEN 50001 AND 100000";                         
            }
            if (trim($this->request->data['Typology']['typology_price']) == 5) {    
                $queryTypologies .= " AND Typology.price BETWEEN 100001 AND 500000";                            
            }
            if (trim($this->request->data['Typology']['typology_price']) == 6) {    
                $queryTypologies .= " AND Typology.price BETWEEN 500001 AND 1000000";                           
            }
            if (trim($this->request->data['Typology']['typology_price']) == 7) {    
                $queryTypologies .= " AND Typology.price > 1000000";                            
            }
        }
        if (trim($this->data['Typology']['typology_conditions'])!='' && !empty($this->data['Typology']['typology_conditions']) && $this->data['Typology']['typology_conditions']!='') {
            $queryTypologies .= " AND Typology.typology_condition_id='".$this->request->data['Typology']['typology_conditions']."'";    
        }
        $queryTypologies .=" ORDER BY Typology.id DESC";

                    $typologies = $this->Typology->query($queryTypologies);    
                    $this->set('typologies', $typologies);
                    /* debug($this->data); // This is used for development purposes ONLY!  */

                    if($this->RequestHandler->isAjax()){                        
                        $this->render('search', 'ajax');    
                    }               
                }
            }

        }
    }

在View中我使用了这个Ajax:

<!-- HERE IS THE SEARCH FILTER -->
 <script type="text/javascript" >
 //<![CDATA[
    $(document).ready(function () {
        $('.select_filter').bind('change keyup input',function(event) {
            $('html,body').animate({ scrollTop: $("#work").offset().top}, "slow");
            var formData = $('#search_form').serialize(); 
            $.ajax({
                async:true, 
                data: formData, // You will get all the select data..
                dataType:'html',
                success:function(data){
                    $("#projects").html(data);
                },
                type: 'POST',
                url:'<?php echo Router::Url(array('controller' => 'typologies','admin' => false, 'action' => 'search'), true); ?>'
            });
            event.preventDefault();
            return false;
        });
    });
//]]>
 </script>

这对我来说很有魅力。随意使用它。我希望它对任何人都很方便。

答案 1 :(得分:0)

我认为您可以正常执行查找,就像您在index()页面上所做的那样。 似乎您在将ajax响应返回给客户端时遇到问题。

为此,您可以使用json views,这样您就可以在控制器上进行搜索(在search()方法中)和视图中的渲染,并将其作为ajax响应返回,而不是与原生PHP代码中的所有内容都在同一个地方。

请查看此链接了解如何使用它:http://book.cakephp.org/2.0/en/views/json-and-xml-views.html#using-a-data-view-with-view-files

答案 2 :(得分:0)

public function beforeFilter() {    
 parent::beforeFilter();
    // Controller spesific beforeFilter
    $this->Auth->allow('search');
     if ($this->action == 'search') {
        $this->Security->validatePost = false;
        $this->Security->csrfCheck = false;

        if (!$this->RequestHandler->isAjax()) {
            $this->Security->blackHole($this, 'You are not authorized to process this request!');
            $this->redirect(null, 401, true);
        } 
    }
}

函数对于使用CakePHP 2的代码有用,它有一个带有backgroud运行时的父函数。