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

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。

因此，您可以綁定表單提交上的事件，並防止默認。