Question

为了给一点背景知识，我使用Mailchimp API将我网站上表单中的电子邮件地址添加到我的Mailchimp电子邮件列表中。我发现了一个示例/片段here（在我的代码中略有修改）将电子邮件传递到我的列表，但是一旦表单提交后没有页面重定向，我想要弹出一个模态（即AJAX- ify it）。

以下是我的开始：

HTML：

                     <form role="form" id="signup" class="formee form-inline" action="subscribe.php" method="post">
                        <div class="form-group">
                            <label class="sr-only" for="email-input">Email address
                            </label>
                            <div class="email-input-wrapper">
                                <input type="text" id="email" name="email" class="form-control input-lg" placeholder="name@school.edu" size="40" value="">
                            </div>
                        </div>
                        <div class="form-group">
                           <button class="btn btn-lg" id="request-invite-btn" type="submit" title="Send" value="Send"> Request Invite </button> 
                        </div>
                    </form>

使用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>

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>";
}

＆GT;

模态HTML（我正在使用Bootstrap）：

     <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>

我还使用了顶部网站的MCAPI.class.php文档。

我对此很新，所以我为发布任何不必要的代码而道歉。任何方向都会非常感激。谢谢！

Answer 1

如果您只是想在服务器响应时显示您的模态，您可以执行以下操作：

Doc：http://getbootstrap.com/javascript/#via-javascript

<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>

此代码只是触发示例的服务器响应模式，随意根据您的需求进行改进：）

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

因此，您可以在表单提交上绑定事件，并且只是防止默认。

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

1 个答案: