Question

我有以下表格：

<form  class="friend_form" action="/friend"  data-id="<?php echo $i;?>">    
    <input type="submit"  value="no" name="hey"/>
</form>

以及以下脚本：

$('.friend_form').on('submit', function(){
    $.ajax({
       url: $(this).attr('action'), 
       type: $(this).attr('method'), 
       success: function(html)
       {
           console.log('foo'+$(this).attr('data-id'));
       }
    });
   return false;
});

我要做的是获取data-id属性值，但它返回undefined值。

我的代码出了什么问题？

Answer 1

内部回调中的'this'不是你想象的那样：

$('.friend_form').on('submit', function(){
    var self = this;
    $.ajax({
       url: $(this).attr('action'), 
       type: $(this).attr('method'), 
       success: function(html)
       {
           console.log('foo'+$(self).attr('data-id'));
       }
    });
   return false;
});

或使用闭包：

$('.friend_form').on('submit', function () {
    (function (self) {
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            success: function (html) {
                console.log('foo' + $(self).attr('data-id'));
            }
        });
    })(this);
    return false;
});

或者使用ajax选项上下文：

$('.friend_form').on('submit', function(){
    $.ajax({
       url: $(this).attr('action'), 
       type: $(this).attr('method'),
       context: this, 
       success: function(html)
       {
           console.log('foo'+$(this).attr('data-id'));
       }
    });
   return false;
});

Answer 2

您需要将上下文传递给成功回调，或者只是在方法中设置变量。 AJAX回调中的这个上下文包含jqxhr对象上下文而不是元素的上下文。

$('.friend_form').on('submit', function(){
  var $this = $(this); //<-- Set up here.
    $.ajax({
       url: $(this).attr('action'), 
       type: $(this).attr('method'), 
       success: function(html)
       {
           console.log('foo'+ $this.attr('data-id')); // access it using $this
       }
    });
   return false;
});

您也可以使用$ .proxy传递上下文，但这里不是必需的，而是另一种选择。请注意，这会将回调内的上下文完全更改为DOM元素，因此不需要。

  $.ajax({
       url: $(this).attr('action'), 
       type: $(this).attr('method'), 
       success: $.proxy(function(html)
       {
           console.log('foo'+ $(this).attr('data-id')); // Now this here is the form element.
       }, this)
    });

jQuery在ajax成功函数中获取属性值

2 个答案: