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> 

码笔