ajax正在加載頁面以返回POST請求

當我通過ajax發出「POST」請求時，頁面在返回請求時加載。ajax正在加載頁面以返回POST請求

難道我們不使用ajax來防止整個頁面重新加載嗎？

這是我的html代碼：

<form method="post"> 
<div align="center" class="col-md-10"> 
    <input type="text" id= "input" name="input" > 
</div>< 
<div class="form-group"> 
    <button type="submit" class="btn btn-default" id="search"> 
    Search 
    </button> 
    </div> 
    </form>

，這是我的Ajax請求：

<script> 
    $(document).ready(function() { 
    $(".search").on('click', function() { 
      var data = {}; 
      data['input'] = $('#input').val(); 
      // Submit data via AJAX§ 
      $.ajax({ 
      url: '/home', 
        type: 'post', 
        data: data, 
        success: function (data) { 
        } 
      }); 
    }); 
    }); 
</script>

做任何人知道如何解決這個問題，我在做什麼錯！

來源

2015-10-13 Christofer Hansen

觸發事件處理程序由於提交按鈕提交頁面。 – epascarello

「search」類不存在。在你的JS試試'$（「＃search」）''而不是'$（「。search」）' – 6339

只需將按鈕類型改爲按鈕 – ManiMuthuPandi

我想了解更多信息編號不上課。它根本不調用Ajax。它越來越提交，因爲它是一個submit按鈕，這樣改變你這樣的代碼，

注：.search將無法正常工作，

$("#search").on('click', function (e) { 
    e.preventDefault(); 
    var data = {}; 
    data['input'] = $('#input').val(); 
     // Submit data via AJAX 
    $.ajax({ 
     url: '/home', 
     type: 'post', 
     data: data, 
     success: function (data) { 

     } 
    }); 
});

e.preventDefault()用於防止提交按鈕的默認行爲（默認點擊提交按鈕將重新加載頁面。）查看更多關於e.preventDefault()，here或here

來源

2015-10-13 11:47:45

你是對的，但它可能值得解釋'e.preventDefault（）'，因爲簡單地通過ID選擇不會停止提交的表單。 – Archer

@Archer我正在爲此添加鏈接。現在將添加。 –

@NiranjanNRaju感謝您的回答，但頁面仍在加載請求 –

-1

你必須在你的onclick事件處理函數返回false停止形式提交：

$(".search").on('click', function() { 
    var data = {}; 
    data['input'] = $('#input').val(); 
    // Submit data via AJAX§ 
    $.ajax({ 
     url: '/home', 
     type: 'post', 
     data: data, 
     success: function (data) { 
     } 
    }); 

    return false; 
});

也請檢查這一點，你必須search，以獲取有關difference between return false; and e.preventDefault();

來源

2015-10-13 11:47:19

不知道爲什麼這個保證未註釋downvotes。當然，由於錯誤的選擇器，'on'處理程序永遠不會被擊中，但'返回錯誤'信息同樣重要。 –

您正在使用Id並選擇錯誤的類。

使用

$("#search").on('click', function (e) {

，而不是

$(".search").on('click', function (e) {

所以最終的JS會

<script> 
$(document).ready(function() { 
    $("#search").on('click', function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     var data = {}; 
     data['input'] = $('#input').val(); 
     // Submit data via AJAX§ 
     $.ajax({ 
     url: '/home', 
       type: 'post', 
       data: data, 
       success: function (data) { 
       } 
     }); 
    }); 
});

來源

2015-10-13 11:52:21

如果您需提交無頁面加載你需要防止按鈕的默認行爲：

$(your_button).on('click', function (ev) { 
    ev.preventDefault(); 
    // do stuff here 
});

來源

2015-10-13 12:00:42

-1

使用type =「button」而不是提交。提交按鈕將按原樣提交表單。

來源

2015-10-13 12:13:58

您的代碼是好吧。
你只需要添加preventDefault()到click功能，並改變從.search到#search，即..

<script> 
    $(document).ready(function() { 
    $("#search").on('click', function (e) { 
      e.preventDefault(); 
      var data = {}; 
      data['input'] = $('#input').val(); 
      // Submit data via AJAX§ 
      $.ajax({ 
      url: '/home', 
        type: 'post', 
        data: data, 
        success: function (data) { 
        } 
      }); 
    }); 
    }); 
</script>

事件。preventDefault（）

此方法不接受任何參數。例如，點擊的錨點不會將瀏覽器帶到新的URL。我們可以使用event.isDefaultPrevented（），以確定這種方法被稱爲由被這個事件

來源

2015-10-13 12:17:59

非常感謝你的回答和解釋 –

非常歡迎@ChristoferHansen :) –

ajax正在加載頁面以返回POST請求

回答

相關問題