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 .. 。表单被提交，从而刷新表单。

但是，如果将您的代码放在单击功能中比创建两个单独的单击事件更好。