表單不會在ie8中通過ajax提交 - 跨域響應失敗

Question

我是jQuery，AJAX和php的初學者。以下是我正在嘗試實現的內容：
- 如果用戶通過尚未具有電子郵件表單的頁面進入網站，請顯示一個模式彈出窗口，要求他們選擇加入電子郵件地址。
- 用戶單擊提交後，更改模式中的內容以顯示感謝信息，然後自動關閉模式，從而允許用戶與其原來的頁面進行交互。
- 將提交的信息發送到數據庫
- 我不想在提交時將它們重定向到確認頁面，但如果模式沒有自動關閉，而只是顯示確認消息，則會好。

我必須擁有一個不同的服務器的網站託管在對PHP的，所以我覺得我有一個跨域響應的問題。我能夠在Firefox，Chrome，Safari和IE10中成功提交表單（提交到數據庫），並且在提交表單時我沒有在控制檯中看到任何錯誤消息。但是，數據不會從IE8傳輸。

我已經在網上做了一些研究，並閱讀了關於使用JSON，JSONP和XDR，但a）我不清楚如何實現（現在我的頭上）和b）似乎使用這些方法似乎增加有人訪問這些電子郵件地址提交的風險。

我該怎麼做才能在IE8中工作？任何指導將不勝感激。到目前爲止，iFrame是我能找到的最接近的替代方案，但滾動條並沒有消失，它們也是不可接受的。

這裏是我的腳本（網站服務器會自動用了jQuery 1.3.2，我要使用的模式較新的版本，因此，使用noConflict的不是一個選項刪除到1.3.2參考）：

 <script type="text/javascript"> 
     var jQuery_1_7_2 = jQuery.noConflict(true); 
     function validateEmail(email) { 
     var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
     return reg.test(email); 
     } 
     jQuery_1_7_2(document).ready(function(){ 
     var emailFormExists = jQuery_1_7_2('#e2ma_signup_form'); 
     if (document.cookie.indexOf('visited=true') == -1 && !(emailFormExists.length)){ 
     var fifteenDays = 1000*60*60*24*15; 
     var expires = new Date((new Date()).valueOf() + fifteenDays); 
     document.cookie = "visited=true;expires=" + expires.toUTCString(); 
     jQuery_1_7_2.fancybox({width:"100%", inline:true, href:"#inline"}); 
     } 
     else 
     { 
     jQuery_1_7_2('#e2ma_signup_form').length 
     var fifteenDays = 1000*60*60*24*15; 
     var expires = new Date((new Date()).valueOf() + fifteenDays); 
     document.cookie = "visited=true;expires=" + expires.toUTCString(); 
     } 
     jQuery_1_7_2("#contact").submit(function() { return false; }); 


     jQuery_1_7_2("#send").on("click", function(){ 
     var emailval = jQuery_1_7_2("#email").val(); 
     var mailvalid = validateEmail(emailval); 

     if(mailvalid == false) { 
     jQuery_1_7_2("#email").addClass("error"); 
     } 
     else if(mailvalid == true){ 
     jQuery_1_7_2("#email").removeClass("error"); 
     } 



     if(mailvalid == true) { 
     // if both validate we attempt to send the e-mail 
     // first we hide the submit btn so the user doesnt click twice 
     jQuery_1_7_2("#contact").fadeOut("fast", function(){ 
      jQuery_1_7_2(this).before("<p><strong>Thanks for opting in!</strong></p>"); 
      setTimeout("jQuery_1_7_2.fancybox.close()", 1000); 
     }); 

     jQuery_1_7_2.ajax({ 
     type: 'POST', 
     url: 'http://domain.com/scripts/email-opt-in.php', 
     data: jQuery_1_7_2("#contact").serialize(), 
     success: function(data) { 
     if(data == "true") { 
     jQuery_1_7_2("#contact").fadeOut("fast", function(){ 
      jQuery_1_7_2(this).before("<p><strong>Thanks for opting in!</strong></p>"); 
      setTimeout("jQuery_1_7_2.fancybox.close()", 1000); 
     }); 
     } 
     } 
     }); 
     } 
     }); 
     }); 
     </script> 

這裏是PHP：

 <?php require_once('../Connections/Liz.php'); ?> 
     <?php 
     $insertSQL = "INSERT INTO optin (id, email) VALUES ('','".$_POST['email']."')"; 
     mysql_select_db($database_Liz, $Liz); 
     $Result1 = mysql_query($insertSQL, $Liz) or die(mysql_error()); 
     ?> 

，這裏是我的html：

 <div id="inline"> 
      <h2>Join the mailing list!</h2> 

      <form id="contact" name="contact" action="#" method="post"> 
       <label for="email">Your E-mail</label> 
       <input type="email" id="email" name="email" class="txt"> 

       <button id="send">Submit</button> 
      </form> 
     </div> 

Answer 1

的第一我不得不說，使用jQuery_1_7_2()絕對看起來糟糕的代碼重寫！我可以建議var $j = jQuery.noConflict(true); - 那麼你可以使用你的平時$j(window).method()'s

無論如何，你可能會面臨比通過AJAX調用跨網站發佈值得更多的麻煩。此鏈接可能是相關的：CORS with jQuery and XDomainRequest in IE8/9

使用IFRAME發佈聲音就像一個好主意 - 但我不明白爲什麼你不能隱藏滾動條。您可以使用CSS將iframe移至瀏覽器視口的-999em（垂直）或將其封裝在隱藏的div中。