JQuery的Ajax調用停止refresing頁面

Question

我有以下的html代碼：

<div> 
    <form id="ChartsForm"> 
     <div id="optionsheader"> 
      <p>Choose your page:</p> 
      <div id="dateoptions"> 
       <p>Until date: <input type="date" name="until_date" value="Until date"></p> 
       <p>Since date: <input type="date" name="since_date" value="Since date"></p> 
      </div> 
     </div> 
     <select name="accmenu" id="accmenu" style="width:300px; float:left; clear:both;"> 
      <?php 
      $user_accounts = $facebook->api('/me/accounts','GET'); 
      foreach($user_accounts['data'] as $account) { 
      ?> 
       <option data-description="<?php echo $account['category'] ?>" data-image="https://graph.facebook.com/<?php echo $account['id']; ?>/picture" value="<?php echo $account['id'] ?>"><?php echo $account['name'] ?></options> 
      <?php 
      } 
      ?> 
     </select> 
     <div class="insightsoptions"> 
      <p>Choose your insights:</p> 
      <input id="newLikes" class="insightsbuttons" type="submit" name="submit" value="Daily new likes"> 
      <input id="unlikes" class="insightsbuttons" type="submit" name="submit" value="Daily unlikes"> 
     </div> 
     <div class="insightsgraphs"> 
      <div id="dailyNewLikes"></div> 
      <div id="dailyUnlikes"></div> 
     </div> 
    </form> 
</div> 

其中有包含兩個日期輸入until_date和since_date的id=ChartForm一種形式，一個選擇accmenu和兩個值提交輸入Daily new likes和Daily unlikes。我用下面的jQuery函數：

$(function() { 
    $('#accmenu').change(function() { 
     $(".insightsgraphs div").hide(); 
     $(".insightsoptions input").attr("class","insightsbuttons"); 
    }); 
    $("#newLikes").one('click', function() { 
     $.ajax({type:'GET', url: 'newLikes.php', data:$('#ChartsForm').serialize(), success: 
      function(response) { 
       var json = response.replace(/"/g,''); 
       json = "[" + json + "]"; 
       json = json.replace(/'/g,'"'); 
       var myData = JSON.parse(json); 
       var myChart = new JSChart('dailyNewLikes', 'line'); 
       myChart.setDataArray(myData); 
       myChart.setSize(960, 320); 
       myChart.setAxisNameX(''); 
       myChart.setAxisValuesColorX('#FFFFFF'); 
       myChart.setAxisNameY(''); 
       myChart.setTitle('Daily New Likes'); 
       myChart.draw(); 
      }}); 
     return false; 
    }); 
    $("#newLikes").on('click', function(){ 
     $(this).toggleClass('green'); 
     $('#dailyNewLikes').toggle(); 
    }); 
    $("#unlikes").one('click', function() { 
     $.ajax({type:'GET', url: 'unlikes.php', data:$('#ChartsForm').serialize(), success: 
      function(response) { 
       alert(response); 
       $("#dailyUnlikes").html(response); 
      }}); 
     return false; 
    }); 
    $("#unlikes").on('click', function(){ 
     $(this).toggleClass('green'); 
     $('#dailyUnlikes').toggle(); 
    }); 
}); 

以下列方式提出申請流程：我每次點擊輸入一個提交按鈕腳本將只作一個Ajax的GET請求到一個特定的PHP文件，發送我回復了一個響應，我用id=dailyNewLikes或id=dailyUnlikes（爲了測試的目的，我只在第一個按鈕上工作的時刻）以隱藏格創建圖表。該按鈕會將其背景顏色更改爲綠色，並將顯示div。我使用$("#newLikes").on('click', function(){來改變div的背景顏色和顯示時間。 （從綠色和display:block到紅色和display:none，你會得到我希望的觀點：D）。另外，我使用$('#accmenu').change(function() {將所有按鈕更改爲紅色，並在選擇項中的選項更改時隱藏相應的div。我的問題是，在我刷新頁面（Ctrl + R）後，選擇從開始到截止日期，點擊第一個按鈕（它變爲綠色，顯示div，同時開關工作正常），然後點擊第二個按鈕它在第一次點擊時正常工作（正在顯示綠色和div），但在第二次點擊時，我遇到了一個問題：該腳本正在製作另一個Ajax GET請求（錯誤的URL之一）並刷新頁面。防爆。好域名網址：

http://localhost/smd/unlikes.php?until_date=2013-05-01&since_date=2013-04-01&accmenu=497232410336701 

和ex。一個錯誤的請求URL：

http://localhost/smd/?until_date=2013-05-01&since_date=2013-04-01&accmenu=497232410336701&submit=Daily+unlikes#_=_ 

喜歡的話可以看出（它並不需要在第一次使這個額外的要求）的PHP文件不存在，也是一個新的提交的參數被添加。如果我通過另一個選項從選擇中更改，也會發生這種情況。我做錯了什麼？我真的需要知道，不僅僅是讓我的代碼「固定」。它擾亂了我一段時間。任何反饋都比歡迎。附：另外，只有在同時選擇了兩個日期輸入的情況下，如何才能啓動.one功能？像什麼可以幫助我？

var until = $('#dateoptions input[name="until_date"]').val(); 
var since = $('#dateoptions input[name="since_date"]').val(); 
if (until == "" || since == "") { 
    alert('Until date or Since date missing!'); 
    return; 
} 

它會這樣工作嗎？對不起，長期的問題...

Answer 1

我認爲你應該讓你的問題稍微短一點，只需指出你需要什麼錯誤，你越來越..anyway ...通過你的代碼我看到你有兩個點擊在其他功能中針對$("#unlikes").one和$("#unlikes").on( ..和no return false的結尾處的相同按鈕的事件。

嘗試添加回假

$("#newLikes").on('click', function(){ 
    $(this).toggleClass('green'); 
    $('#dailyNewLikes').toggle(); 
    return false; 
}); 

$("#unlikes").on('click', function(){ 
    $(this).toggleClass('green'); 
    $('#dailyUnlikes').toggle(); 
    return false; 
}); 

我的猜測是，因爲你有兩個點擊event..when它被點擊..these事件將觸發因爲你在第二次點擊功能缺失return false .. 。表單被提交，從而刷新表單。

但是，如果將您的代碼放在單擊功能中比創建兩個單獨的單擊事件更好。