运行Ajax查询刷新div内PHP文件文件、Ajax、div、PHP

2023-09-10 20:01:50 作者:荒城旧巷°

我目前正在一个多步骤的查询形式,可以发现上:的http://的jsfiddle .NET / xSkgH / 47 / 。

I'm currently working on a multi-step query form which can be found at: http://jsfiddle.net/xSkgH/47/.

我试图通过jQuery AJAX提交的变量(process.php将处理处理),并刷新DIV 最后一步的DIV在process.php名为结果。我怎样才能做到这一点?

I'm trying to submit the variables via jQuery AJAX (process.php will handle the processing) and refresh the div last-step with the div in the process.php called result. How can I achieve this?

到目前为止,我所管理的这个使用jQuery插件的形式通过malsup完成(http://jquery.malsup.com/form/),现在需要使用jQuery AJAX方法来完成它作为一个严格的部分规范。

I've so far managed to accomplish this using the jQuery form plugin by malsup (http://jquery.malsup.com/form/) and now need to using the jQuery AJAX method to accomplish it as part of a strict specification.

这是在code我一直在使用(使用jQuery的形式插件):

This is the code I had been using (with the jQuery form plugin):

// 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);
    });
}

非常感谢!

推荐答案

使用 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);
    });
}