多步骤表单上的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); 
    } 
});