Question

我有一小段代码用于从用户的个人资料中发送电子邮件，假设显示错误或成功消息。

// Mensagem para o dono do anúncio
$('#formulario_anunciante').on('submit', function (e) {
    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: '/auto/usuario/send_contact_email',
        dataType: 'json',
        cache: false,
        data: $(this).serialize(),
        success: function (data) {
            // It reaches here
            console.log(data);
            //
            if (data.type === 'success') {
                $(this).find('div.msg').removeClass().addClass('msg alerta_sucesso').html(data.msg).fadeIn().delay(5000).fadeOut();
            } else {
                $(this).find('div.msg').removeClass().addClass('msg alerta_erro').html(data.msg).fadeIn().delay(5000).fadeOut();
            }
        }
    });
});

代码到达console.log，在控制台中显示返回的消息，但不对表单中的div.msg标记执行任何操作。它肯定在#formulario_anunciante内。另外，出于测试目的，我尝试删除了类msg，但标签似乎无法访问。

我已尝试添加JSON.parse(data)并删除dataType: 'json'，但无效。

Answer 1

在success函数内，this引用了AJAX对象。因此，请尝试将原始变量的副本复制到$this并使用它：

$('#formulario_anunciante').on('submit', function (e) {
  e.preventDefault();
  $this = $(this);
  $.ajax({
    type: 'POST',
    url: '/auto/usuario/send_contact_email',
    dataType: 'json',
    cache: false,
    data: $(this).serialize(),
    success: function (data) {
      // It reaches here
      console.log(data);
      //
      if (data.type === 'success') {
        $this.find('div.msg').removeClass().addClass('msg alerta_sucesso').html(data.msg).fadeIn().delay(5000).fadeOut();
      } else {
        $this.find('div.msg').removeClass().addClass('msg alerta_erro').html(data.msg).fadeIn().delay(5000).fadeOut();
      }
    }
  });
});

Answer 2

回调函数中的

this不再引用#formulario_anunciante，因为它超出了范围。您需要更改选择器：

var $this = $('#formulario_anunciante')
if (data.type === 'success') {
                $this.find('div.msg').removeClass().addClass('msg alerta_sucesso').html(data.msg).fadeIn().delay(5000).fadeOut();
            } else {
                $this.find('div.msg').removeClass().addClass('msg alerta_erro').html(data.msg).fadeIn().delay(5000).fadeOut();
            }

Ajax调用不显示div中的状态消息

2 个答案: