Question

我正在制作一个小搜索功能，我已将.ctp个文件放入元素中，这样我就可以在不重新加载整个页面的情况下实现ajax post而只渲染元素。

元素非常简单，它会创建一个li项，其中包含从控制器传递的请求数据。

<li class="span2">
<a  class="pull-left" href="">
    <img  class="media-object" src="<?php $img_path = $result['Person']['profile_image']; echo $img_path;?>">
</a>
<div class="media-body">
    <label class="person-media">
        <?php
        $firstName = ucfirst($result['Person']['first_name']);
        $lastName = ucfirst($result['Person']['last_name']);

        echo $firstName;
        echo "<br>";
        echo $lastName;
        ?>
    </label>
</div>

在我的搜索操作中，我想保留整个骨架（页眉，页脚，搜索div持有者），只需在无序列表中呈现列表项。但在点击搜索时，整个页面都会加载

这里我试图设置数据

//transform POST into GET
    if($this->request->is("post")) {
        $url = array('action'=>'manage');
        $filters = array();

        if(isset($this->data['searchFor']) && $this->data['Search.name']){
            //maybe clean up user input here??? or urlencode??
            $filters['Search.name'] = $this->data['Search.name'];
        }
        //redirect user to the index page including the selected filters
        $this->redirect(array_merge($url,$filters));
    }

    $conditions = array();
    //
    // filter by name
    //
    if(isset($this->passedArgs['Search.name'])) {
        $conditions["Person.first_name LIKE"] = "%".$this->passedArgs["Search.name"]."%";

    }
    //paginate as normal
    $this->paginate = array(
        'conditions' => $conditions,
        'order' => array('Person.first_name ASC'),
        'limit' => 12
    );
    $this->layout = "main";
    $this->set("results",$this->paginate("Person"));
    **$this->render('manage');** // rendering on the element loads everything

从查询中找到我的结果后，manage.ctp会加载所有内容。

  </div>
<ul id="students-list" class="students-ist">
   <?php

    if(!empty($results)){

        foreach($results as $result){
            echo $this->element('singleuser', array('result' => $result));
        }
    }

    ?>

</ul>

我如何使用Ajax和表单提交加载div中的元素，而无需在每次搜索时重新加载整个页面。

Answer 1

有几种方法可以从服务器获取整页的一部分，并将其中的部分内容放入浏览器的页面中。

以下是将进行AJAX调用的搜索表单的提交处理程序。用AJAX完成回调将用新的替换学生列表项目

/* place code in script tag or external file after jQuery.js loads*/
$(function(){
    /* adjust selector to match ID of form*/
    $('#searchForm').submit(function(){
          /* sends form data retrieved in php as if form submitted through browser defalt method*/
           /* "this" is the form, serialize will formencode all fields in form*/
          var dataToServer=$(this).serialize();
          $.get( 'pageUrl.php', dataToServer, function(response){
                /* AJAX has returned page, "response" is the full html of page*/
               /* get the items from list from response*/
                var studentListItems= $(response).find('#students-list').html();

                /* replace the list items in active page*/
                $('#students-list').html(studentListItems);

           });
       /* prevent form default submit*/
       return false;
    });

})

一旦你让Cake控制器返回你想要的LI，你可以直接将响应转储到列表中：

$('#students-list').html(response);

cakephp在表单提交上加载部分视图

1 个答案: