在ajax请求后只重新加载页面的一部分


reload just a part of a page after ajax request

我正在尝试为我的数据列表添加一个搜索模块。

我将请求发布到的函数会呈现一个视图。

按下搜索按钮后如何加载列表网格?

我应该echohtml代码,还是呈现一个视图并将该视图写在那个位置?

我完全糊涂了。。。

public function actionSell() {
    $cond="";
    if($_POST) {
        foreach ($_POST as $key => $value) {
            $_POST[$key] = str_replace(',', '', stripslashes(mysql_real_escape_string($value)));
        }
        $melk_id = $_POST['melk_id'];
        $city_id = $_POST['city_id'];
        $cost_from = $_POST['cost_from'];
        $cost_to = $_POST['cost_to'];
        $metraj_from = $_POST['metraj_from'];
        $metraj_to = $_POST['metraj_to'];
        if($melk_id) $cond .= ' and melk_id='.$melk_id; 
        if($city_id) $cond .= ' and city_id='.$city_id;
        if($cost_from) $cond .= ' and cost >='.$cost_from;
        if($cost_to) $cond .= ' and cost <='.$cost_to;
        if($metraj_from) $cond .= ' and metraj >='.$metraj_from;
        if($metraj_to) $cond .= ' and metraj <='.$metraj_to;
    }
    $dataProvider = new CActiveDataProvider('Data', array('criteria' => array(
            'condition' => 'type = 0 '.$cond,
            'order' => 'id DESC',
        ),
        'pagination' => array('pageSize' => 15)
    ));
    $this->render('sell', array(
        'dataProvider' => $dataProvider,
    ));
}

我不是php开发人员,但我会尝试用jQuery的方式回答。

  1. 假设您将列表网格保存在一个容器中:<div id="container"> //the grid </div>

  2. 您从View填充容器,该容器包含网格

  3. 您有Seach文本框
    <input id="searchBox" type="text" name="SeachTxt" Value="Some text"/>

    和按钮:<input id="SearchBtn" type="button" value="Search Now!">

  4. 接下来,您必须有一个jQuery-ajax-post函数,如以下函数:

    jQuery("#SearchBtn").click(function(e) {
    e.preventDefault();
    jQuery.ajax({
        url: 'index.php?searchString=' + jQuery("#searchBox").val(),
        success: function(result) {
            jQuery("#container").html(result);
        }
    });
    

    });

您可以使用renderPartial,如

$this->renderPartial('_ajaxContent', array(
                        'dataProvider' => $dataProvider
                    ), false, true
);