使用 JQuery AJAX 实现多表单处理答案

【问题标题】：Implementing multiple form processing using JQuery AJAX使用 JQuery AJAX 实现多表单处理
【发布时间】：2016-03-24 21:26:25
【问题描述】：

我正在一个网站上工作，我需要在同一页面中执行各种操作..使用 3 个表单..一个一个。 ..类似于 unlockninja.com

问题是当我提交一个表单时..我得到另一个表单的布局作为响应...我在同一个 div 中将第一个表单替换为第二个。所有表单都有不同的 ID，我正在使用 JQuery AJAX使用 3 个不同的 PHP 文件处理表单。

问题是：它仅适用于 2 个连续表单...但是在第三次单击时...页面刷新并停止进一步处理...即没有刷新页面不会更新......它正在调用刷新并返回上一个表单......而不是进入下一个表单。总共我有 3 个表单...在提交每个表单时...发生一些 PHP db 操作...在这些操作之后...php 脚本回显要加载到 HTML 的 div 区域的 html 布局。 .里面我放置表格。

正在执行数据库操作...但页面更新在 2 个表单后无法正常工作。

<script type="text/javascript">
$(function(){
    $("#orderForm").submit(function(e){
       e.preventDefault();

var service_id = $("#service_id").val();
var imei = $("#imei").val();
var email = $("#email").val();
var phone = $("#phone").val();
var api_key = $("#api_key").val();
var comments = $("#comments").val();
var dataString = 'service_id='+ service_id + '&imei=' + imei + '&email=' + email + '&phone=' + phone + '&api_key=' + api_key+ '&comments=' + comments;

if(imei.length != 15 || isNaN(imei)){
$("#message_ajax").html('<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><strong>Please enter a valid IMEI number. Type *#06# on your phone.</strong> </div>');
return false;
}
        $.ajax({
        type: "POST",
        url: "order_processor.php",
        data: dataString,

        success: function(data) {
         $("#service_area").html(data).show(); 
         //$('#orderForm').unbind('submit').submit()         
        }

        });         

    });
});

</script>


<script type="text/javascript">
$(function(){
    $("#paymentForm").submit(function(e){
       e.preventDefault();
        $("#service_area").html("Processing Payment...Please wait").show();  
        $.ajax({
        url: "payment_processor.php",

        success: function(data) {
         $("#service_area").html(data).show(); 
         //$('#paymentForm').unbind('submit').submit()       
        }

        });                  
    });
});
</script>

<script type="text/javascript">
$(function(){
    $("#goBackForm").submit(function(e){
       e.preventDefault();
        $("#service_area").html("All is well...getting back").show();  
        $.ajax({
        url: "all_done_processor.php",        
        success: function(data) {
         $("#service_area").html(data).show(); 
         //$('#goBackForm').unbind('submit').submit()        
        }           
        });                  
    });
});

</script>

我认为该问题与 e.preventDefault() 有关。我尝试通过

解决该问题

$('#orderForm').unbind('submit').submit()

仍然...没有成功。

【问题讨论】：

您需要更好地描述问题而不是“停止工作”。发生什么了？什么不会发生？除非您提供更多详细信息，否则我们无法为您解决问题。
能否请您也添加html
已更新问题。我有一个带有表单的 div 区域...在提交时调用了一个 php 脚本...处理该数据并回显响应..即新的表单布局。我再次用带有提交按钮的新表单替换最后一个表单......这样......它必须处理3个表单。但它只适用于任何 2 个连续的表格。

标签： php jquery ajax

【解决方案1】：

您的 2 个 AJAX 调用未在 $.ajax() 函数中指定 method 和 data 属性。当没有传递method 时，$.ajax() 默认方法是GET。如果我理解你的逻辑，那不是你想要做的。

您要提交表单 1，在成功回调中获取表单 2。然后提交表单 2，并在成功回调中获取表单 3。最后，提交表单 3。

所以首先添加method 和您的数据，它应该可以工作。

【讨论】：