多步驟表單上的jQuery ajax

Question

大家好，我正在嘗試將jQuery AJAX整合到我的多步驟表單中，以便它將某個div更新爲process.php頁面上的某個div，但它始終將結果加載到新一頁。如何在不刷新頁面的情況下更新div？

這是我使用jQuery代碼：

$.ajax({ 
    url: 'process.php', 
    data: $('form[name="booking"]').serialize(), 
    dataType: 'html', 
    type: 'POST', 
    success: function(data) { 

     // this is the bit that needs to update the div 

     $('#last-step').fadeOut(300, function() { $('#result').html(data).fadeIn(300); 
    }, 
    complete: function (data) { 
     // your code here 
    }, 
    error: function (url, XMLHttpRequest, textStatus, errorThrown) { 
     alert("Error: " + errorThrown); 
    } 
}); 

這是我的多步驟形式的代碼：http://jsfiddle.net/xSkgH/47/。

在提前感謝

Answer 1

我沒有看到一個div在標記稱爲result。所以可能你需要在你顯示的最後一個div中顯示你的結果。而且你也缺少})。下面的代碼應該可以工作，

$.ajax({ 
    url: 'process.php', 
    data: $('form[name="booking"]').serialize(), 
    dataType: 'html', 
    type: 'POST', 
    success: function(data) { 

     // this is the bit that needs to update the div 

     $('#last-step').fadeOut(300, function() { 
       $('#last-step').html(data).fadeIn(300); 
     }); 
    }, 
    complete: function (data) { 
     // your code here 
    }, 
    error: function (url, XMLHttpRequest, textStatus, errorThrown) { 
     alert("Error: " + errorThrown); 
    } 
});