jQuery-无法动态更改表单的动作并将其提交在Ajaxform（）成功事件中

StackOverflow https://stackoverflow.com/questions/3685417

题

这是要发布到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支付网关需要用户在发布后填写一些表格，因此Ajax提交再次提交 ajaxSubmit() 行不通。我需要那里的正常表格提交。

谢谢，
Sandeepan

有帮助吗？

解决方案

我不使用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...

其他提示

如果您尝试更改表格的动作并将其重新提交并不在Ajax的成功中怎么办？例如您可以使用 setTimeout 在 success 回调并在说1秒后进行代码？

只是参考： http://www.w3schools.com/js/js_timing.asp

我不确定我会明白您为什么要按照自己的方式进行操作，但是在我看来，XMLHTTPRequest失败了，因为脚本只能使请求回到其原始服务器。

不允许XMLHTTPREQUEST对象进行跨域，跨协议或跨端口请求。您可以通过某些方法来规避这一限制，但我不确定我会建议这样做。

我要做的就是将您的服务器用作将其发布到WorldPay的代理。 IE。用户通过Ajax向服务器发布表单。您的服务器对所有必要操作进行了所有必要操作，并将表单重新提交为WorldPay，解析结果并通过Ajax将结果返回给客户端。

  • 为什么您需要通过客户的Ajax提交它？
  • 为什么需要先提交服务器？

您试图尝试的方式有各种各样的域和沙盒特定问题。我认为这不可能。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top