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

Question

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

这里是我开始用：

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

>

HTML模式（我使用的引导）：

 <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

，如果你只是想显示你的模式，当你的服务器响应你可以做到以下几点：

文件：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。

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