javascript - Yii2 Ajax DropDownList 更改 div 的内容

Question

我正在使用 Yii2 开发一个应用程序，我对 ajax 了解不多。所以我尝试使用 W3Schools ( http://www.w3schools.com/php/php_ajax_database.asp ) 的示例

我想做一个过滤器，我想使用 DropDownList 中的值更改 div 的内容，这里是 View 的代码:

...
<script>
function showUser(str) {
  if (str==="") {

document.getElementById("transactions").innerHTML="";
return;
} 
  if (window.XMLHttpRequest) {

// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
 xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {

  document.getElementById("transactions").innerHTML=xmlhttp.responseText;
  }
 };    
    xmlhttp.open("GET",document.location.href="filter?by="+str,true);
    xmlhttp.send();
}
</script>
<?php $this->head() ?>
</head>

现在是 DropDownList:

<?=Html::dropDownList(
    'test', //name
    'b', //select
    ['' => 'Select Filter...', '1' => 'Exchanging Now', '2' => 'Last Exchanged', '3' => 'Last Offered', '4' => 'Last Discounted', '5' => 'Last Recieved', '6' => 'View All'],
    ['onchange'=> 'showUser(this.value)'])
   ?>

好吧，div“交易”的内容发生了变化，但是它重定向到 localhost/.../filter?by=x

我怎样才能停止这个重定向？在我的 Controller 中，我返回一个字符串。这是个问题吗？

--- 编辑 ---

在我阅读了有关 Pjax 的一些研究之后，我尝试了一些测试，并使用了一个简单的链接和作品，但无法使用下拉列表。这是我的代码的更改。 查看:

<div id="categories">
<?=Html::a('TEST LINK', Url::to(['filter', 'by' => 1]), ['data-pjax' => 'transactions'])
?>

    <?= Html::dropDownList(
            'test', //name
            'b', //select
            ['' => 'Select Filter...', '1' => 'Exchanging Now', '2' => 'Last Exchanged', '3' => 'Last Offered', '4' => 'Last Discounted', '5' => 'Last Recieved', '6' => 'View All'], //items
            ['onchange' => 'this.form.submit()'], ['data-pjax' => 'transactions']
    )
    ?>

PjaxCode StackOverflow不让我放Pjax的代码，所以我通过链接上传了一张图片

Controller - 只是为了展示我要返回的内容的示例:

public function actionFilter() {
$by= $_POST['test'];
$string = "";
if ($by == 1) {
return $string = self::searchPendingEvent();  
}}

public function searchPendingEvent() {
    $query = Event::findBySql("Select * from dot_events where (dot_event_to_user =" . Yii::$app->user->id . " "
                    . "and dot_event_type = 1 and dot_event_completed = 0) or ("
                    . "dot_event_type = 4 and dot_event_to_user =" . Yii::$app->user->id . " and dot_event_completed = 0)"
                    . " order by dot_datecreate DESC")->asArray()->all();


    $string = "";
    if ($query == null) {
        $string .="Nothing to show :(";
    } else {

        for ($i = 0; $i < sizeof($query); $i++) {

            $string.= self::formatEvent($query[$i]['dot_event_id']);
        }
    }

    return $string;
}

public function formatEvent($id) {

if ($model['dot_event_type'] == 1 && $model['dot_event_to_user'] == Yii::$app->user->id) {
        $string .= "<p class='text-primary text-right p1'>" . Functions::xTimeAgo($model['dot_datecreate'], date("c", time())) . "</p>";
        $string .="<div class='well'>";
        $string .="<p class='lead text-left text-primary'>";
        $string .= "<img class='img-circle' height='50' width='50' src='" . Yii::$app->request->baseUrl . "/img/user/" . $model['dot_event_to_user'] . ".png' alt='Image Missing'>";
        $string .=Html::a("You", ['user/profile']);
        $string .="</p>";
        $string .="<p class='text-left'>requested " . Html::a($profile[0]['full_name']);
        $string .="to trade " . Html::a($tradeE['dot_cr_dots'] . " pts", ['dashboard/index']) . " from company ";
        $string .=$company['dot_com_name'] . " for company" . $companyE['dot_com_name'];
        $string .="</p>";
        $string .="</div>";
    }

Answer 1

重定向从这一行开始:

xmlhttp.open("GET",document.location.href="filter?by="+str,true);

分配后

document.location.href="filter?by="+str

我认为有错误或打字错误。试试这个:

xmlhttp.open("GET",document.location.href+"/filter?by="+str,true);

或者使用 jQuery(http://api.jquery.com/load/):

function showUser(str) {
  $( "#transactions" ).load( "test.php", { "by": str } );
}

where test.php - 从哪里获取#transactions block 的数据的 url

更新: 删除你的 <script>...</script>在头上

<?=Html::dropDownList(
    'test', //name
    'b', //select
    ['' => 'Select Filter...', '1' => 'Exchanging Now', '2' => 'Last Exchanged', '3' => 'Last Offered', '4' => 'Last Discounted', '5' => 'Last Recieved', '6' => 'View All'],
    ['onchange'=> 'showUser(this.value)'])
  ?>
  <?php
  use yii\web\View;
  $this->registerJs('
  function showUser(str) {
      $( "#transactions" ).load( "dashboard/filter", { "by": str } );
  }', View::POS_END);
  ?>

现在您的 js 代码定位在连接 jQuery 文件之后。