jQuery .submit() - 重新设计使用框架/集的网站

Question

我正在重新设计一个最初是在 90 年代编写的网站 :( 并且可以看到它使用了框架/框架集。

有许多页面允许用户输入客户、产品、订单详细信息并执行提交操作。在此提交时，表单将发送给第 3 方，并生成参考代码并向用户显示。

由于网站是使用框架集开发的，因此发送单个框架时会留下页眉、导航和页脚，就像生成代码（由第三方创建）出现在应用程序中一样。

当前 html 示例：

<form method="post" name="ReqForm" action="https://3rdparty.com/cgi-bin/3rdparty.cfg/php/enduser/custoption.php">

当前js示例：

document.forms[0].submit();

上面的表单提交成功。

我的新html：

<form method="post" id="openAccount" name="ReqForm">

我的新 JS：

$("#openAccount").attr("action","https://3rdparty.custhelp.com/cgi-bin/3rdparty.cfg/php/enduser/custoption.php");
$("#openAccount").submit();

我的新代码成功提交了表单并生成了代码，但是（像 href 一样），应用程序会转到第 3 方站点并显示参考号。

如何捕获表单提交的详细信息（例如 uniq ref），并显示在我当前的页面/站点中？

我应该隐藏一个新表单吗？

谢谢

在 Kevins 评论之后更新：

在表单的 HTML 中，我有一个按钮：

<button type="button" class="one-sixth submitForm">Submit Details</button>

这与我的 JS 中的 onClick 相关联：

$(".submitForm").click(function () {

....
....
Field validations...
....
....

if (isValid) {
   $("#openAccount").attr("action","https://3rdparty.custhelp.com/cgi-bin/3rdparty.cfg/php/enduser/custoption.php");
   $("#openAccount").submit();
}

});

更新有效：

if (isValid) {

    alert('1');

    $("#openAccount").submit(function(e){
        e.preventDefault();

        alert('2');

        $.post("https://3rdparty.custhelp.com/cgi-bin/3rdparty.cfg/php/enduser/custoption.php",function(result){
            //result should contain the response from 3rd party
            //execute success actions here
        });


        alert('3');

    });

  }

Answer 1

使用 Ajax 请求向第 3 方站点发送请求，而不是提交表单。这将允许您在成功处理程序中捕获第 3 方响应，而无需完全重新加载页面。

$("#openAccount").submit(function(e){
    e.preventDefault();
    $.post("https://3rdparty.custhelp.com/cgi-bin/3rdparty.cfg/php/enduser/custoption.php",function(result){
        //result should contain the response from 3rd party
        //execute success actions here
    });

});