jQuery：Ajax調用不起作用

Question

我正在使用Jquery計算用戶的點擊次數和按鍵次數。

$(document).ready(function(){
    var countClick = 0;
    var keyClick = 0;


    $("body").mousedown(function(){
        countClick ++;          
    });


    $("body").keypress(function(){
         keyClick ++;               
    });


    $("body").bind('keyup', function(e) {
        if(e.keyCode >= 37 && e.keyCode <= 40){
          keyClick ++;
        }
    }); 


});

現在，當用戶單擊“發送”按鈕時，我想將其發送到另一頁以保存這些數據，但是我認為ajax調用無法正常工作，並且非常簡單。

$('#send').click(function(){        

    $.ajax({
     type: 'post',
     data: {mouse: countClick, teclado: keyClick},
     url: 'save.php',
     dataType: "json",
     success: function(data){
        alert(data);
     },
     error: function (e) {
        console.log(e);
     }
    });
});

但是沒有警報和控制台日志顯示。 我是否需要“關閉”按鈕標簽之間的表單並指定method和action ？

<form method="POST" action="#">
 <button id="send"> Send Data </button>
</form>

還是這不是規則，我不需要表格來進行ajax調用並發送數據嗎？

Answer 1

您不一定需要表單來進行Ajax調用。

1. 您的計數器變量在$（“＃send”）。click方法內沒有作用域，它們在document.ready方法之外是未定義的

2. 由於您使用的是Ajax發布功能，因此您需要在單擊“發送”按鈕時阻止表單自動提交。 由於您未使用按鈕類型=“按鈕”，因此默認情況下將其設置為按鈕類型=“提交”。

這是有效的解決方案

 var countClick = 0; var keyClick = 0; $(document).ready(function(){ $("body").mousedown(function(){ countClick ++; }); $("body").keypress(function(){ keyClick ++; }); $("body").bind('keyup', function(e) { if(e.keyCode >= 37 && e.keyCode <= 40){ keyClick ++; } }); }); $('#send').click(function(event){ $.ajax({ type: 'post', data: {mouse: countClick, teclado: keyClick}, url: 'save.php', dataType: "json", success: function(data){ alert(data); }, error: function (e) { console.log(e); } }); event.preventDefault(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="POST" action="#"> <button id="send" type="button"> Send Data </button> </form> 

碼筆