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调用的表单。

你的计数器变量在$（＆＃34; #send＆＃34;）中没有范围。click方法，它们在document.ready方法之外是未定义的
由于您正在使用Ajax发布，因此您需要在单击“发送”按钮时阻止表单自动提交。由于您没有使用按钮类型=＆＃34;按钮＆＃34;，它默认为按钮类型=＆＃34;提交＆＃34;。

这是有效的解决方案

＆＃13;

import AnotherComponent from '../AnotherComponenet'

<AnotherComponent setAlert={this.setAlert} />

＆＃13;

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();
    });

＆＃13;

Codepen

Jquery：Ajax调用不起作用

1 个答案: