Ajax表單提交（8）

我定製的原始形式的源代碼和創建的兩種形式：Ajax表單提交（8）

它們可以在除IE（8）以外的所有瀏覽器中工作。怎麼了？

第一種形式：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>First form</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 

<body> 
    <form method="POST" id="ss-form"> 
    <br> 
    <div class="errorbox-good"> 
     <div class="ss-item ss-text"> 
     <div class="ss-form-entry"> 
      <label class="ss-q-title" for="entry_0">Name 
      </label> 
      <label class="ss-q-help" for="entry_0"></label> 
      <input type="text" name="entry.0.single" class="ss-q-short" value="" id="entry_0"> 
     </div> 
     </div> 
    </div> 
    <br> 
    <input type="hidden" name="pageNumber" value="0"> 
    <input type="hidden" name="backupCache" value=""> 
    <div class="ss-item ss-navigate"> 
     <div class="ss-form-entry"> 
     <input type="submit" name="submit" value="Submit"> 
     </div> 
    </div> 
    </form> 
    <script> 
    $("#ss-form").submit(function (event) { 
     event.preventDefault(); 
     $.ajax({ 
     type: 'POST', 
     url: 'https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq', 
     data: { 
      'entry.0.single': $('#entry_0').val() 
     }, 
     success: function() { 
      alert('Thanks!'); 
     } 
     }); 
    }); 
    </script> 
</body> 

</html>

第二種形式：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Second form</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 

<body> 
    <form method="POST" id="ss-form"> 
    <br> 
    <div class="errorbox-good"> 
     <div class="ss-item ss-text"> 
     <div class="ss-form-entry"> 
      <label class="ss-q-title" for="entry_0">Name 
      </label> 
      <label class="ss-q-help" for="entry_0"></label> 
      <input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0"> 
     </div> 
     </div> 
    </div> 
    <br> 
    <input type="hidden" name="pageNumber" value="0"> 
    <input type="hidden" name="backupCache" value=""> 
    <div class="ss-item ss-navigate"> 
     <div class="ss-form-entry"> 
     <input type="submit" name="submit" value="Submit"> 
     </div> 
    </div> 
    </form> 
    <script> 
    $("#ss-form").submit(function (event) { 
     event.preventDefault(); 
     $.post('https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq', $("#ss-form").serialize(), 
     function() { 
      alert('Thanks!'); 
     } 
    ); 
    }); 
    </script> 
</body> 

</html>

來源

2012-10-18 Mori

我們需要看到一些代碼能夠告訴你代碼出了什麼問題。 –

上述自定義表單及其源代碼均可訪問。 – Mori

@RainLover明年他們能接觸嗎？ –

只是包裝的所有腳本到：

$(function(){ ... });

例如

$(function(){ 

    $.support.cors = true; // for cross-origin requests in IE 

    $("#ss-form").submit(function(event) { 
     event.preventDefault(); 
     $.post('https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq', $("#ss-form").serialize(), 
      function() { 
       alert('Thanks!'); 
      } 
     ); 
     }); 

});

當文檔沒有加載到最後並且事件目標在DOM中不存在時，您的事件回調被分配。如果您將腳本封裝到$(function(){ ... });那麼它確保代碼將在頁面加載後執行。

來源

2012-10-18 20:01:43

感謝您的答案，但它沒有任何區別 - 只是測試：http：//dl.dropbox.com/u/4017788/Labs/third-form.htm – Mori

它原來是已知的jQuery的bug在IE瀏覽器中：http://bugs.jquery.com/ticket/10660查看解決方法的更新答案。 –

試過它沒有運氣。 :( – Mori

Ajax表單提交（8）

回答

相關問題