使用 jQuery 和 Ajax 进行点击垃圾邮件保护？

Question

如果用户在几秒钟内点击过多链接，我想进行验证（点击垃圾邮件保护）。 假设我想限制一个相同类型的 href 按钮来激活一个计数器，防止在 10 秒内再次点击此 href 按钮。

我有一个活动列表，您可以作为用户加入，例如活动 Facebook 上的加入按钮。但是因为这些事件列表非常紧凑，所以有很多加入按钮。这就是为什么我想通过点击这些连接按钮来防止用户向数据库发送垃圾邮件。

我正在使用 jQuery，这是我的代码：

$(function() {
  $(".event_join").click(function() {

    var id = $(this).attr("id");
    var uid = <?php echo $_SESSION['uid']; ?>;
    var dataString = 'event_join=' + id + '&uid=' + uid;

    if (uid == '') {
      alert("not logged in");
    } else {
      $("#event_" + id).html('Joining the guestlist...');

      $.ajax({
        type: "POST",
        url: "ajax_insert.php",
        data: dataString,
        cache: false,
        success: function(html){
          $("#event_" + id).html('You're on the guestlist!');
        }
      });
    } return false;
  });
});

这是在 ajax_insert.php 文件中进行验证的常用方法吗？如果是，我如何告诉 jQuery 这不是“成功”并打印出错误？

Answer 1

使用“标志”。宣布 变量标志 = 0; 原来。然后在代码中，如下使用它：

if(flag==0) {
flag = 1;
$.ajax({
    type: "POST",
    url: "ajax_insert.php",
    data: dataString,
    cache: false,
    success: function(html){
        $("#event_" + id).html('You're on the guestlist!');
        flag=0;
    }
});

这样可以防止重复。一旦提交，您可以使用 javascript 禁用表单，这样用户就无法发送另一个请求。

编辑 1： 如果您使用作为链接，那么您可以禁用链接本身。有很多方法可以做到这一点。喜欢

$('.event_join').removeAttr('href');

第二种方法是更改​​链接地址。

$('.event_join').attr('href','#');

或

$('.event_join').attr('href','javascript:void(0)');

第三种方法可能是隐藏链接。

$('.event_join').css({'display':'none'});

第四种方法是彻底删除链接。

$('.event_join').html('');

如果其父母只有一个孩子，则更好，

$('.event_join').parent().html('');

可以有更多方法，只需探索网络即可。

如果您有许多带有 event_join 类的链接，请使用 $('this') 而不是 $('.event_join')，以免所有链接都被禁用/隐藏/删除。完整的代码可能是：

if(flag==0) {
flag = 1;
$.ajax({
    type: "POST",
    url: "ajax_insert.php",
    data: dataString,
    context: $(this),
    cache: false,
    success: function(html){
        $("#event_" + id).html('You're on the guestlist!');
        $(this).removeAttr('href');
        flag=0;
    }
});

成功后会移除 href 属性，因为 ajax 请求可能在第一次点击时没有完成。并且使用flag这个东西是为了防止在成功函数运行之前多次点击。

Answer 2

您可以按照您提供的方式进行操作。不清楚javascript代码，但它可以工作。有两种方法可以检查响应是否成功。

第一个是解析服务器响应。 在这种情况下，成功的服务器结果应该返回如下内容：

  echo( json_encode( array( 'result' => true ) ) );
  exit();

对于错误：

  echo( json_encode( array( 'result' => false ) ) );
  exit();

并且在客户端服务器的 json 回复将由 JQuery 自动解析。所以，像这样处理响应：

success: function( response ){
  if( 'undefined' == typeof response.result ||
      false == response.result ){
    console.log( 'Server returned error. Handle it here' );
  } else {
    console.log( 'Server returned success!' );
  }
}

但我更喜欢使用 HTTP 响应代码，因为它就是为此而生的。接下来是与服务器握手的第二种方式。在服务器端成功：

http_response_code( 200 );
echo( 'Good, lets go' );
exit();

对于错误：

http_response_code( 401 );
echo( 'It looks like you are bad boy' );
exit();

在这种情况下，在客户端，您可以通过这种方式捕获服务器响应：

success: function( response ){
  console.log( 'Server returned http200 code. It means request was success and we do not need even to parse result' );
},
error: function( jqXHR, textStatus, errorThrown ){
  console.log( 'Server returned error. This could be not only an error you awaiting for, but any other. All error details are provided in incoming variables' );
}