AJAX替代使用jQuery表单ui

Question

大家好，我正在使用jQuery表单插件处理表单提交（可在http://malsup.github.com/jquery.form.js)在我的页面上，但现在必须切换到使用纯基于jQuery AJAX的方法（不使用任何表单插件，但我可以使用jQuery）。实现这一目标的最佳方法是什么？我很难把它翻译过来。理想的解决方案是什么样子的？

这是我现在使用的代码：

// prepare the form when the DOM is ready 
$(document).ready(function() { 
var options = { 
    target:        '#result',  
    beforeSubmit:  showRequest,  
    success:       showResponse   
}; 
// bind to the form's submit event 
$('#booking').submit(function() { 
    $(this).ajaxSubmit(options); 
    return false; 
    }); 
});  
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    // alert('About to submit: nn' + queryString); 
}
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  {
    $('#last-step').fadeOut(300, function() {
    $('#result').html(responseText).fadeIn(300);
    });
}

Answer 1

您可以这样做：

$.ajax({
    url: 'process.php',
    data: $('form[name="booking"]').serialize(),
    dataType: 'html',
    type: 'POST',
    success: function(data) {
        $('#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);
    }
});

• 数据参数可以是这样的：'param1=value1&param2=value2&param3=值3'
• 类型可以是：POST或GET
• dataType可以是：json、html、xml

有关更多信息，请参阅以下网址：http://api.jquery.com/jQuery.ajax/