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 绑定

$(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 表单的成功事件中提交，而表单仍然是 binded。 因此，我尝试盲目地将 $("form#wpftuf").unbind(options); ， $("form#wpftuf").unbind(); $("form#wpftuf").unbind(ajaxForm); 放在 $("form#wpftuf").attr("action",worldpayUrl); 行之后（一个接一个），但在所有情况下我都会收到此错误 uncaught exception: Permission denied to call method XMLHttpRequest.open

ajax 表单处理成功后如何将表单动态提交给worldpay。表格需要先unbinded吗？请帮忙。这可能有一个简单的解决方案，但我无法得到它。我搜索了很多。

请注意
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(); //submit it...

Answer 2

如果您尝试更改表单的操作并在 AJAX 不成功的情况下重新提交它怎么办？例如。您可以在success 回调中使用setTimeout 并在假设1 秒后执行代码？

仅供参考：http://www.w3schools.com/js/js_timing.asp

Answer 3

我不确定我明白你为什么要按照你的方式来做，但在我看来 XMLHttpRequest 失败了，因为脚本只能将请求发回其原始服务器。

XMLHTTPRequest 对象不允许进行跨域、跨协议或跨端口请求。您可以通过多种方式规避此限制，但我不确定是否会推荐。

我会使用您的服务器作为代理将其发布到 worldpay。 IE。用户通过 ajax 将表单发布到您的服务器。您的服务器会进行所有必要的操作，然后将表单重新提交给 worldpay，解析结果并通过 ajax 将结果返回给客户端。

• 为什么需要客户端通过ajax提交？
• 为什么需要先提交到服务器？

您正在尝试解决各种特定于域和沙盒的问题。我觉得不可能。