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

我目前正在开发一个多步查询表单，可以在以下url找到： http ： //jsfiddle.net/xSkgH/47/ 。

我试图通过jQuery AJAX提交变量（process.php将处理处理）并使用process.php中的div调用div 最后一步调用div。 我怎样才能做到这一点？

到目前为止，我已经设法使用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(){})发送一个post请求，并用打印到响应html中的url填充’last-step’的html内容。