javascript - Ajax 表单 - 仍然无法使其与验证一起使用

Question

我之前曾在这里发过帖子，但是收到的答案没有任何帮助，因为它们不起作用。

我有一个使用 AJAX 的表单，但没有出现错误或成功消息。

任何人都可以看到我可能忽略的内容吗？谢谢。

HTML

<form id="newsletter" action="http://app.bronto.com/public/webform/process/" method="post">
                            <input type="hidden" name="fid" value="gmy3v1ej883x2lffibqv869a2e3j9" />
                            <input type="hidden" name="sid" value="37ea72cebcc05140e157208f6435c81b" />
                            <input type="hidden" name="delid" value="" />
                            <input type="hidden" name="subid" value="" />
                            <script type="text/javascript">
                            var fieldMaps = {};
                            </script>
                            <label for="nameField">Name:</label>
                            <input id="nameField" type="text" id="field_66663" name="39829[66663]" value="" />
                            <label for="emailField">Email:</label>
                            <input id="emailField" type="text" name="39821" value="" />
                            <input type="submit" value="Submit" />
                            <div id="newsletter-message" style="display:none;"></div>
</form>

JS

//ajax subscribe
$(document).ready(function(){
    $("#newsletter").submit(function(event) {
        event.preventDefault();
        alert("submitting");
        alert(data); //it doesn't alert here??
        console.log($("#newsletter").serialize());
        $.post($("#newsletter").attr("action"), $("#newsletter").serialize(), function(data){
            alert(data); //doesn't alert here either
        if(data == 'success'){
        $('#newsletter-message').html('You have been signed up.').removeClass('error').css('visibility','visible');
            } else {
        $('#newsletter-message').html('Please complete the fields and re-submit').addClass('error').css('visibility','visible');
    }
        });
        //Stop the normal POST
        return false;
    });
});

编辑

我现在已经尝试过，但仍然没有运气..

$("#newsletter").submit(function(event) {

  event.preventDefault();

  var $form = $( this ),
      ufname = $form.find( 'input[name="39829[66663]"]' ).val(),
      uemail = $form.find( 'input[name="39821"]' ).val(),
      url = $form.attr( 'action' );

  var posting = $.post( url, { name: ufname, email: uemail } );

  posting.done(function( data ) {
    $('#newsletter-message').html('You have been signed up.').removeClass('error').css('visibility','visible');
  });
});

Answer 1

可见性和显示是CSS中的两个不同的东西。

您正在使用 display:none; 创建显示 div，但随后尝试使用 .css('visibility','visible ');，所以你最终会得到:

<div style="display: none; visibility: visible;" id="newsletter-message">...</div>

由于 display:none;，它仍然不可见。

您应该将 if 中的操作替换为:

if(data == 'success'){
    $('#newsletter-message').html('You have been signed up.').removeClass('error').show();
} else {
    $('#newsletter-message').html('Please complete the fields and re-submit').addClass('error').show();
}

这里是关于 .show() jQuery 函数的文档:http://api.jquery.com/show/