爲什麼AJAX重定向到新的頁面在PHP

我有一個表格：爲什麼AJAX重定向到新的頁面在PHP

<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，但結果顯示在新頁面中。

我該如何解決這個問題？

來源

2015-05-21 Orkhan Alizade

這應該是理想的工作，嘗試使用'$（'form'）。on（'submit'..'處理程序而不是'$（'。searchByAge'）。on（'click''）。這裏是一個答案http://stackoverflow.com/a/21837273/3639582 –

你確定你的功能正在運行？嘗試添加一個「alert」來查看它是否被調用。 – Barmar

將代碼更改爲以下。改變輸入型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 
      } 
     }); 
    }); 
});

來源

2015-05-21 04:43:34

但'e.preventDefault（）;'在點擊處理程序中被調用 –

它仍然重定向 –

@steven它適用於點擊，請參閱http://jsfiddle.net/kojvebs7/3/ – Barmar

替換代碼

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

與此

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

在第一個代碼，你阻止了點擊事件，而不是提交事件這就是爲什麼形式仍然是提交

來源

2015-05-21 05:26:33 tzafar

爲什麼AJAX重定向到新的頁面在PHP

回答

相關問題