0

我正在制作一个小型搜索功能，其中我将.ctp文件放入元素中，这样我就可以实现 ajax 发布，而无需重新加载整个页面并且只渲染元素。

该元素非常简单，它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 内的一个元素，而无需在每次搜索时重新加载整个页面。

4

1 回答 1

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);
于 2012-12-25T03:22:33.010 回答