jquery - 表单提交后返回“成功”消息

Question

我试图在成功的 jquery 电子邮件验证和表单提交后返回“谢谢”消息。我想显示“谢谢”消息并防止页面重定向到操作 url，但仍处理数据服务器端。在研究时，我认为 Jquery 回调听起来是正确的，但需要更多的指导，因为我发现的例子有点到处都是。任何人都可以提供一些输入吗？

$("#emailsignup_form").validate();
});

$('#submitemail').click(function() {
    app.ajax.load({
         reqName : 'emailSubmit',
         url: "$httpUrl('Bronto-OptIn')$?email=" + $('#email').val(), 
         selector : '#emailbox',
         callback: function(responseText, textStatus) { }
return false;
    }
});

<form id="emailsignup_form" method="post" action="$httpUrl('Bronto-OptIn', 'fid', 'information')$">
<input id="cemail" name="email" size="25"  class="required email" />
<input class="submit" id="submitemail" type="submit" value="Submit"/>
</form>
<div id="emailbox"></div>

Answer 1

通过将上面的代码修改为：

$('#emailsignup_form').validate({
    rules: {
        email: {
            required: true,
            email: true
        }
    },
    messages: {
        email: {
            required: "this is required",
            email: "this must be a valid email"
        }
    },
    submitHandler: function (form) {
        app.ajax.load({
        reqName : 'emailSubmit',
        url: "$httpUrl('Bronto-OptIn')$?email=" + $('#email').val(), 
        selector : '#emailbox',
        callback: function(responseText, textStatus) {  }
        });
        return false;
    }
});
});

<div id="emailbox">
<form id="emailsignup_form" name="emailsignup_form" method="post" action="">
<input type="text" name="email" id="email" />
<input type="submit" name="submitemail" id="submitemail" value="Submit" />
</form>
</div>

Answer 2

假设您添加一个div来显示您的帖子的结果

<form id="emailsignup_form" method="post" action="">
    <input id="cemail" name="email" size="25"  class="required email" />
    <input class="submit" id="submitemail" type="submit" value="Submit"/>
</form>
<div id="postresult">
</div>

您可以$.post()像这样发布您的数据

$(function(){
    $("form#emailsignup_form").submit(function(e){
        e.preventDefault();
        $.post(
            "processdata.php", 
            $(this).serialize(), 
            function(data){
                //Your code to process returned data goes here
                $("#postresult").text("Thank you!");
            }
        );
    });        
});