Jquery - 无法动态更改表单的操作并在 ajaxForm() 的成功事件中提交它

Question

这是要发布到 Worldpay 支付网关的付款表格。它具有 WorldPay 文档中的所有参数，如果直接发布，它可以正常工作。

但是，现在我正在努力

• AJAX 首先将表单发布到我的网站(使用 jquery.form，并且该部分工作正常)，然后执行一些数据库操作
• 然后使用 JavaScript 更改操作属性并将其发布到 Worldpay。但 worldpay 帖子无法正常工作，并且以下代码中的 $("form#wpftuf").submit(); 行之后发出的任何警报也不会发出警报。

付款方式

<form name="wpftuf" id="wpftuf" method="post" action="http://url/of/ajax/file/add_credit"> 
       <input type="hidden" name="operation" value="add_credit" id="operation" /> <?php // for ajax validation ?>
 <input type="hidden" name="worldpayUrl" value="<?php echo WPurl?>" id="worldpayUrl" />
...
..
...other necessary fields
</form>

这里我将 worldpay URL 作为参数传递

AJAX 绑定(bind)

$(document).ready(function() 
 {

  var options = {
            dataType:  'json',
            beforeSubmit: function()
            {
       //alert("submitting");
      },
            success: function(data)
            {
                if(data)
                {
                 if(data.success)
                 {
                  var worldpayUrl = $("input[id=worldpayUrl]").val();
                            $("form#wpftuf").attr("action",worldpayUrl);

     alert("this works");
                            $("form#wpftuf").submit();

                                        //This alert does not work
                    alert("this alert does not work "+$("form#wpftuf").attr("action"));
                 }
                }
            }
            ,
            error:function()
            {
             alert("validation failed");
            }
        };

  $("form#wpftuf").ajaxForm(options);


 });

我猜发生错误是因为我试图更改操作并在ajax表单的成功事件内提交，并且表单仍然绑定(bind)。所以，我尝试盲目地输入 $("form#wpftuf").unbind(options); ， $("form#wpftuf").unbind(); $("form#wpftuf").unbind(ajaxForm); 在 $("form#wpftuf").attr("action",worldpayUrl); 行之后(一个一个)但在所有情况下我都会收到此错误未捕获的异常:调用方法 XMLHttpRequest.open 的权限被拒绝

ajax表单处理成功后，如何动态提交表单到worldpay。表单是否需要先解除绑定(bind)？请帮忙。这可能有一个简单的解决方案，但我无法得到它。我查了很多。

请注意
worldpay 支付网关需要用户在发布后填写一些表单，因此使用 ajaxSubmit() 再次进行 AJAX 提交将不起作用。我需要在那里提交一个普通的表单。

谢谢，
桑迪潘

Answer 1

我没有使用 malsup 插件，但如果我是对的，你的问题是 .submit(); 当你使用带有表单的 ajax 请求时，通常它会被设置为不采取任何操作return false;，因此当您提交它时，它仍然被阻止!

你的代码应该是这样的:

已更新

$("#wpftuf").submit(function(e) {
    e.preventDefault(); // prevent normal form submission, same as return false;
    $form = $(this);
    var worldpayUrl = $("#worldpayUrl").val(); //get the World Pay php url
    var mySiteFirstUrl = $("#mySiteFirstUrl").val(); //get Your Site First php url
    // if ( valid ) { // make a validation here...
    var posts = $(this).serialize(); // get all form fields in form like: name=value
    //start the first ajax request...
    $.ajax({
        type: "POST",
        url: mySiteFirstUrl,
        data: posts,
        success: function(data) { // send back a json formatted response ?
            var result = $.parseJSON(data); //prepare json
            // if ( result ) { //make another validation here...
            // start making the changes to the form here
            // fill all the form fields with the returned json data...
            $form.attr('action' , worldpayUrl ); //give it the action url ); 
            $form.unbind('submit').submit(); //submit it...
            //}
        }
    });
    //}
});

实质上使用这个$("#wpftuf").unbind('submit').submit();//提交...