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
          }
      });
     });  
 });

Answer 2

替换你的代码

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

用这个

$('form.searchForm').on('submit', function(e){
e.preventDefault();

在您阻止点击事件的第一个代码上，而不是提交表单仍在提交

的事件

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

2 个答案: