jQuery Ajax表單插件的行爲不如預期

有沒有人看到下面的問題？我試圖讓ajaxSubmit（）工作，但第一個嬰兒的步驟是失敗的。我的理解是，任何動作腳本 - processaj.php這裏 - 輸出都應放入#output元素中。我已經processaj.php減少到：jQuery Ajax表單插件的行爲不如預期

<?php 
    error_reporting(E_ALL); 
    echo ("In processaj.php"); 
?>

所以我很期待「在processaj.php」時，我提交的東西DIV #output露面，但似乎什麼都沒有。感謝您的幫助..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ajax Form Test</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/jquery.form.js"></script> 
<style> 
#output { 
    width: 300px; 
    height:200px; 
    background-color: beige; 
    border:1px solid red; 
    margin-top: 20px; 
} 

</style> 
<script> 
     $(document).ready(function() { 
      $('#UploadForm').on('submit', function(e) { 
       e.preventDefault(); 
       $(this).ajaxSubmit({ 
        target: '#output' 
       }); 
      }); 
     }); 
    </script> 

</head> 
<body> 

    <form action="processaj.php" method="post" id="UploadForm"> 
     data: <input name="data" type="text" value="enter"/> 
     <input type="submit" id="SubmitButton" value="Submit" /> 
    </form> 
    <div id="output"></div> 
</body> 
</html>

來源

2013-05-30 Steve

而不是使用e.PreventDefault（），你應該在on回調函數中返回false。正如文件中所述。

$('#myForm2').submit(function() { 
    // inside event callbacks 'this' is the DOM element so we first 
    // wrap it in a jQuery object and then invoke ajaxSubmit 
    $(this).ajaxSubmit(options); 

    // !!! Important !!! 
    // always return false to prevent standard browser submit and page navigation 
    return false; 
});

來源

2013-05-30 07:19:54 vdwijngaert

使用返回false，而不是e.preventDefault（），放processaj.php腳本的瀏覽器，所以我看「在processaj.php」，但它並不具有形式的原始頁面上，在＃輸出框。它看起來像ajaxSubmit沒有做它應該做的事情，即保持動作頁面不被下載，只是將任何輸出的動作頁面管道到表單頁上的#output div。 – Steve

奇怪。你在開發者控制檯（chrome開發工具，螢火蟲，...）有任何錯誤嗎？ – vdwijngaert

是的！ Firebug控制檯的檢查顯示jquery.forms.js文件未找到，這是因爲我沒有將其上傳到服務器！隨着forms.js加載我的原始代碼的作品，你的版本與返回false。抱歉!謝謝你的幫助。 – Steve

jQuery Ajax表單插件的行爲不如預期

回答

相關問題