为什么AJAX重定向到PHP中的新页面

Question

我有一个表格:

<form class="searchForm">
            <div class="box_style_1">
                <h4><?= Yii::t("common", "Age"); ?></h4>
                <?
                echo '<b class="badge">3</b> ' . Slider::widget([
                        'name'=>'age',
                        'value'=>'250,650',
                        'sliderColor'=>Slider::TYPE_GREY,
                        'pluginOptions'=>[
                            'min'=>3,
                            'max'=>21,
                            'step'=>1,
                            'range'=>true
                        ],
                    ]) . ' <b class="badge">21</b>';
                ?>
                <br /><br />
                <input type="submit" value="Search" class="searchByAge"/>
                <br /><br />
            </div>
            </form>

并希望在console.log中显示结果:

$('.searchByAge').on('click', function(e){
e.preventDefault();

var range = $('.form-control').val();
var min = range.split(',')[0];
var max = range.split(',')[1];

//alert(min+' '+max);

$.ajax({
    type: 'POST',
    url: '/age/'+min+'/'+max,
    data: $('.searchForm').serialize(),
    success: function (data) {
        console.log(data);
    },
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    }
});
})

那是我的AJAX代码.但是,当我单击"搜索"按钮时,它会将我重定向到新页面,而控制台日志中没有任何内容.我不知道我的代码有什么问题.

我从'/ age/min_age/max_age'页面返回一个JSON,但结果显示在新页面中.

我该如何解决这个问题？

Answer 1

将代码更改为以下.将输入类型更改submit为button

<input type="button" value="Search" class="searchByAge"/>

还包括你的代码 $(document).ready();

确保从正确的路径添加jQuery库.

 $(document).ready(function(){

     $('.searchByAge').on('click', function(e){
        e.preventDefault();

        var range = $('.form-control').val();
        var min = range.split(',')[0];
        var max = range.split(',')[1];

          //alert(min+' '+max);

        $.ajax({
          type: 'POST',
          url: '/age/'+min+'/'+max,
          data: $('.searchForm').serialize(),
          success: function (data) {
           console.log(data);
          },
          error: function(jqXHR, textStatus, errorMessage) {
            console.log(errorMessage); // Optional
          }
      });
     });  
 });