爲什麼我的jquery文章結果消失了？

我有一個基本表單，我希望使用ajax提交，而不必實際重新加載頁面。這是代碼的要點：爲什麼我的jquery文章結果消失了？

<cfif cgi.request_method EQ "post"> 
    <cfdump var="#form#" /> 
    <cfabort /> 
</cfif> 

<html> 
    <head> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

     <script type="text/javascript"> 
      $(function(){ 
       $('#qsSearch').click(function(){ 
        $.post(
         '<cfoutput>#cgi.script_name#</cfoutput>', 
         $('#qsUserForm').serialize(), 
         function(data){ 
          $('#results').html(data); 
         } 
        ); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <form id="qsUserForm"> 
      <table> 
       <tr> 
        <th>First Name:</th><td><input id="qsFirstName" name="qsFirstName" type="text" /></td> 
        <th>Last Name:</th><td><input id="qsLastName" name="qsLastName" type="text" /></td> 
        <th>Username:</th><td><input id="qsUserName" name="qsUserName" type="text" /></td> 
        <th>Email:</th><td><input id="qsEmail" name="qsEmail" type="text" /></td> 
        <th>User ID:</th><td><input id="qsUserID" name="qsUserID" type="text" /></td> 
        <td><input id="qsSearch" name="qsSearch" type="submit" value="Search" /></td> 
       </tr> 
      </table> 
     </form> 
     <div id="results"></div> 
    </body> 
</html>

表單轉儲應顯示在「結果」div。但是，它沒有。

使用Firebug進行調試時，我注意到代碼是實際上正確執行，並且結果被插入到結果div中 - 但是，一旦post代碼退出，它就會消失。如果我在post調用的右括號中放置了一個斷點，我可以在結果div中看到正確的結果 - 只要代碼繼續消失。

我以前經常使用這樣的代碼 - 這個簡單的ajax文章有什麼問題？

（我曾嘗試更換與形式的搜索按鈕單擊處理程序提交處理程序，但它並沒有改變任何東西。）

來源

2012-06-28 froadie

它消失了嗎就像#results沒有html或#results只是被隱藏了嗎？ – Simon

在'$ .post（）'之後的點擊處理程序中添加'return false;'。只是一個想法。 – nbrooks

@nbrooks - 返回false也適用 - 因爲它阻止它繼續默認的提交代碼。如果你把它作爲答案發布，我會upvote :) :) – froadie

顯然，你的形式重裝

你應該停止從提交表單使用：

$('#qsSearch').click(function(event) { 
    event.preventDefault(); 
    $.post('<cfoutput>#cgi.script_name#</cfoutput>', $('#qsUserForm').serialize(), function(data) { 
     $('#results').html(data); 
    }); 
});

來源

2012-06-28 09:30:35

完美！我認爲這可能是重新加載，但不知道如何阻止它。非常感謝！ – froadie

我想我會選擇這種方法，而不是nbrooks在評論中提出的「返回錯誤」，因爲它似乎代表了我正在做的更清楚的事情......兩種方法都比其他方法「更好」嗎？ – froadie

@froadie'return false'同時是'event.preventDefault（）'和'event.stopPropagation（）'。在你的情況下，你只需要'event.preventDefault（）' – Jashwant

在點擊處理程序添加return false;的$.post()之後停止從程序的默認onclick行爲，當你函數完成執行。

來源

2012-06-28 09:51:48 nbrooks

爲什麼我的jquery文章結果消失了？

回答

相關問題