Question

我目前正在制作一个多步骤查询表单，可在以下网址找到：http://jsfiddle.net/xSkgH/47/。

我正在尝试通过jQuery AJAX提交变量（process.php将处理处理）并使用process.php中名为结果的div刷新div last-step 即可。我怎样才能做到这一点？

到目前为止，我已经设法使用malsup（http://jquery.malsup.com/form/）的jQuery表单插件来完成此操作，现在需要使用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 

$('#task5_booking').submit(function() { 
    $(this).ajaxSubmit(options); 
    return false; 
    }); 
});  

// pre-submit callback 

function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    // alert('About to submit: \n\n' + queryString); 
}

// post-submit callback 

function showResponse(responseText, statusText, xhr, $form)  {
    $('#last-step').fadeOut(300, function() {
    $('#result').html(responseText).fadeIn(300);
    });
}

非常感谢！

Answer 1

使用jQuery.ajax处理最后一步：

http://api.jquery.com/jQuery.ajax/

   else if (whichStep == 'last-step') {
        $.ajax( {
            url:'urltophp.php',
            data: {}, // your data
            dataType: 'json', //your datatype
            type: 'POST',   //or GET
            success: function(r) {
                //your callback here...
            }
        });
    }

修改

$('#task5_booking').submit(function(e) { $(e).preventDefault(); //prevent the default form submit() var formData = $(this).serialize(); //serialize the form fields data... $.ajax( { url:'urltophp.php', data: formData, // your data dataType: 'json', //your datatype type: 'POST', //or GET success: showResponse }); //$(this).ajaxSubmit(options); //return false; //}); });

更改此内容：

function showResponse(responseText, statusText, xhr, $form) { $('#last-step').fadeOut(300, function() { $('#result').html(responseText).fadeIn(300); }); }

对此：

function showResponse(responseText) { $('#last-step').fadeOut(300, function() { $('#result').html(responseText).fadeIn(300); }); }

Answer 2

使用http://api.jquery.com/load/。就像使用.ajax一样，只是更容易，更符合您的要求。

$('#last-step').load(url, data, function(){})发送一个帖子请求，并使用打印到响应html中的任何网址填充“last-step”的html内容。

运行AJAX查询以使用php文件刷新div

2 个答案: