Javascript 如何在表单提交时生成模式而不是页面重定向

作为一个小背景，我正在使用Mailchimp API将我网站上表单中的电子邮件地址添加到我的Mailchimp电子邮件列表中。我发现了一个示例/代码片段（在我的代码中稍作修改），它将电子邮件传递到我的列表中，但我希望弹出一个模式（即AJAX），而不是在表单提交后进行页面重定向

我从这里开始：

HTML:

电子邮件地址
请求邀请

Javascript:

        <script type="text/javascript">
        $(document).ready(function() {
        // jQuery Validation
        $("#signup").validate({
            // if valid, post data via AJAX
            submitHandler: function(form) {
                $.post("subscribe.php", { email: $("#email").val() }, function(data) {
                    $('#response').html(data);
                });
            },
            // all fields are required
            rules: {
                email: {
                    required: true,
                    email: true
                }
            }
        });
    });
    </script>

$（文档）.ready（函数（）{
//jQuery验证
$（“#注册”）.validate({
//如果有效，则通过AJAX发布数据
submitHandler:函数（表单）{
$.post（“subscribe.php”，{email:$（“#email”）.val（）}，函数（数据）{
$（'#response'）.html（数据）；
});
},
//所有字段都是必填字段
规则：{
电邮：{
要求：正确，
电子邮件：真的
}
}
});
});

Subscribe.php：

<?php   
require_once 'inc/MCAPI.class.php';
$api = new MCAPI('************************');

// Submit subscriber data to MailChimp
// For parameters doc, refer to: http://apidocs.mailchimp.com/api/1.3/listsubscribe.func.php
$retval = $api->listSubscribe( '********', $_POST["email"], $merge_vars, 'html', false, true );

if ($api->errorCode){
    echo "<h4>Please try again.</h4>";
} else {
    echo "<h4>Thank you, you have been added to our mailing list.</h4>";
}

模式HTML（我正在使用引导）：


&时代；
成功！

谢谢你的关注！

好啊

我还使用了顶部站点中的MCAPI.class.php文档

我对这个很陌生，所以我很抱歉发布了任何不必要的代码。任何方向都将不胜感激。谢谢
 如果您只想在服务器响应时显示您的模式，您可以执行以下操作：

文件：


$（文档）.ready（函数（）{
//处理提交事件
$（“#注册”）.submit（函数（事件）{
event.preventDefault（）；
});
//jQuery验证
$（“#注册”）.validate({
//如果有效，则通过AJAX发布数据
submitHandler:函数（表单）{
$.post（“subscribe.php”，{email:$（“#email”）.val（）}，函数（数据）{
//$（'#response'）.html（数据）；
$（'#emailModal'）.modal（）；
});
},
//所有字段都是必填字段
规则：{
电邮：{
要求：正确，
电子邮件：真的
}
}
});
});

此代码仅触发服务器上的模式响应。对于示例，可以根据您的需要对其进行改进：）

显然，这篇文章涉及重定向和验证jQuery插件

因此，您可以在表单提交时绑定事件，只需防止默认设置。
感谢您如此快速地回复！不幸的是，无论是否使用action属性，我都尝试了它，但都没有成功——它仍然执行页面重定向。在一个不相关的注释中，我可能应该提到，我希望根据电子邮件提交是否经过验证，弹出两个不同的模态。
<?php   
require_once 'inc/MCAPI.class.php';
$api = new MCAPI('************************');

// Submit subscriber data to MailChimp
// For parameters doc, refer to: http://apidocs.mailchimp.com/api/1.3/listsubscribe.func.php
$retval = $api->listSubscribe( '********', $_POST["email"], $merge_vars, 'html', false, true );

if ($api->errorCode){
    echo "<h4>Please try again.</h4>";
} else {
    echo "<h4>Thank you, you have been added to our mailing list.</h4>";
}

     <div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Success!</h4>
          </div>
          <div class="modal-body">
            <p> 
            Thanks for your interest!
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
          </div>
        </div>
      </div>
    </div>

<script type="text/javascript">
        $(document).ready(function() {
        // Handle submission event
        $("#signup").submit(function(event){
            event.preventDefault();
        });
        // jQuery Validation
        $("#signup").validate({
            // if valid, post data via AJAX
            submitHandler: function(form) {
                $.post("subscribe.php", { email: $("#email").val() }, function(data) {
                    //$('#response').html(data);
                    $('#emailModal').modal();                        
                });
            },
            // all fields are required
            rules: {
                email: {
                    required: true,
                    email: true
                }
            }
        });
    });
</script>