jQuery的AJAX POST執行兩次

我的AJAX調用總是執行兩次。我使用的是正常的Javascript事件處理程序和<input type="button">。我不太確定哪裏出錯，服務器返回一個JSON數組，AJAX可以成功接收和解析數據。我很確定這是我的AJAX，因爲當我運行代碼時，警報彈出兩次。 alert("ran")。服務器不返回任何重定向標頭。jQuery的AJAX POST執行兩次

HTML

<form action="/" onsubmit="return false"> 
    <b>Enter your announcement here</b> 
    <span class="dropdown"><img src="/index/img/p/help" style="width: 20px; height: 20px;"/> 
     <span class='dropdown-content'> 
      <b>tip:</b> try to make your announcement less than 100 words. Choose what you say wisely. 
     </span> 
    </span> 
    <textarea class='form-control' id='announcetxtbox' style='resize: vertical'></textarea> 
    <select id="announce-type"> 
     <option value="general">General</option> 
     <option value="social">Social</option> 
     <option value="world">World</option> 
     <option value="maint">Site Maintenence</option> 

    </select> 
    <input type="button" id="announce-submit" class="btn btn-primary" value="Submit"> 

    <script> 
     CKEDITOR.replace("announcetxtbox"); 
     CKEDITOR.config.toolbar = [ 
      {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']}, 
     ]; 
    </script> 

</form>

JAVASCRIPT

function _(str) { 
    return d.getElementById(str); 
} 
function get_announcement_data(ele) { 

    var type, answer = _("announce-msg"); 
    switch (ele) { 
     case "general": 
      type = "G"; 
      break; 
     case "social": 
      type = "S"; 
      break; 
     case "world": 
      type = "W"; 
      break; 
     case "maint": 
      type = "M"; 
      break; 
     default: 
      type = "G"; 
      break; 
    } 

    $.ajax({ 
     url: "/profile_scripts/announcements.php?u=get", 
     type: "POST", 
     data: {type: type, CSRF_TOKEN: _("CSRF_TOKEN_VALUE").value}, 
     success: function (data) { 
      data = JSON.parse(data); 
      answer.innerHTML = ""; 
      for (var i = 0; i < data.length; i++) { 
       if (data[i].response == 1) { 
        answer.innerHTML += data[i].msg + "<small> Written By: " + data[i].author + " on " + data[i].date + "</small>" 
       } else { 
        answer.innerHTML = data[i].msg; 
       } 
      } 

     } 
    }) 

} 
function add_announcement() { //THIS FUNCTION RUNS TWICE! 

    var announcement = CKEDITOR.instances.announcetxtbox.getData(); 
    var type = _("announce-type").value; 
    var code; 
    switch (type) { 
     case "general": 
      code = "G"; 
      break; 
     case "social": 
      code = "S"; 
      break; 
     case "world": 
      code = "W"; 
      break; 
     case "maint": 
      code = "M"; 
      break; 
     default: 
      code = "G"; 
      break; 
    } 

    $.ajax({ 
     url: "/profile_scripts/announcements.php?u=post", 
     type: "POST", 
     data: {type: code, CSRF_TOKEN: _("CSRF_TOKEN_VALUE").value, msg: announcement}, 
     success: function (data) { 
      data = JSON.parse(data); 
      if (data.response == 1) { 
       alert("ran"); 
       get_announcement_data(type); 

      } else { 

       alert("Something went wrong!"); 

      } 

     } 
    }); 

} 
d.addEventListener("DOMContentLoaded", function() { 

    _("quick-actions-go").addEventListener("click", quick_action_search) 

    _("manual-data-pull").addEventListener("click", pull_data); 


    _("announce-submit").addEventListener("click", function (e) { 

     add_announcement(); <--- Event Listener 
     e.preventDefault(); 
     e.stopPropagation(); 
    }); 

    var tab_elements = d.querySelectorAll("[id=ann-tab]"); 

    for (var i = 0; i < tab_elements.length; i++) { 
     tab_elements[i].addEventListener("click", function (e) { 
      e.preventDefault(); 
      get_announcement_data(this.dataset.modeval) 
     }); 
    } 


});

來源

2016-02-22 David Yue

看起來像'宣佈，submit'單擊處理程序是從您的program.you觸發兩次可以檢查你的開發工具堆棧跟蹤，看看它的來源。 – dreamweiver

這裏您的表單提交兩次方法和POST方法。您可以撥打 1.當您打電話給有趣的add_announcement時，傳遞'e'。 Aad add line

e.preventDefault();

作爲fun add_announcement（e）的第一行。

另外，解除綁定形式

提交actiom

$('form').unbind('submit').submit();

希望它能幫助。

來源

2016-02-22 06:13:17 user2947

，但'submit（）'函數刷新頁面。有什麼辦法可以解決這個問題？ –

從表單標記中刪除action attr。試試吧 – user2947

不，它沒有工作。 –

當提交表單。這兩個Ajax會打電話。你第一次得到，使得該問題

來源

2016-02-22 06:11:01

讓我試試看。它曾經是罰款之前... –

都能跟得上......它並沒有爲我 –

$（「＃宣佈提交」）。點擊（函數（E）{ add_announcement（）工作了; <---事件監聽器 e.preventDefault（）; e.stopPropagation（）; }）; –

jQuery的AJAX POST執行兩次

回答

相關問題