Javascript 提交HTML表单时执行两个连续任务（使用Ajax和Node.js中使用Express制作的服务器）_Javascript_Html_Ajax_Node.js_Forms

Javascript 提交HTML表单时执行两个连续任务（使用Ajax和Node.js中使用Express制作的服务器）

javascript html ajax node.js forms

Javascript 提交HTML表单时执行两个连续任务（使用Ajax和Node.js中使用Express制作的服务器）,javascript,html,ajax,node.js,forms,Javascript,Html,Ajax,Node.js,Forms,我在HTML文件中有一个输入表单： <form id="urlarticle"> <input type='text' name='thislink'> <input type='submit' value='Select'> </form> 任务2：打开一个新窗口，在服务器端的GET请求之后使用EJS视图呈现。任务2必须在任务1之后执行，因为它使用任务1保存在数据库中的数据前端上的代码应如下所示： <script

我在HTML文件中有一个输入表单：

<form id="urlarticle">
      <input type='text' name='thislink'>
      <input type='submit' value='Select'>
</form>

任务2：打开一个新窗口，在服务器端的GET请求之后使用EJS视图呈现。任务2必须在任务1之后执行，因为它使用任务1保存在数据库中的数据

前端上的代码应如下所示：

<script type='application/javascript'>
    $("#urlarticle").submit(function() {
    var linkValue = $('input[name="thislink"]').val();
    window.open('/selection/yes/?value='+linkValue);
    });
</script>

但是，如何使任务2仅在任务1完成后执行？谢谢你的帮助

我创建了一个示例NodeJS应用程序，它使用了许多相同的概念（在客户端使用Express和一些jQuery）

工作示例：

使用基本Express应用程序，其中使用

EJS

呈现初始表单（这是

上的

GET

请求）。表单提交将

POST

请求返回到同一URL，并以2秒的延迟进行处理，以模拟数据库操作

/**
*创建一个全局存储变量作为
*附加本地数据库
*/
GLOBAL.linkStorage=[]；
应用程序路径（“/”）
.post（功能（请求、恢复）{
控制台日志（“提交：+req.body”）；
GLOBAL.linkStorage.push（请求body.link）；
渲染层响应（res）；
})
.get（函数（请求、恢复）{
res.render（'form.ejs'）；
});
应用程序路径（“/2”）
.get（函数（请求、恢复）{
//无需传入GLOBAL.linkValue，因为它是自动选中的
res.render（“submission.ejs”）；
});
/**
*将响应延迟几秒钟以模拟数据库
*创建/更新操作
*/
函数RenderLayedResponse（respWriter）{
setTimeout（函数（）{
GLOBAL.viewCount++；
respWriter.send（'操作已完成'）；
}, 2000);  
}

调用

window.open（）

在异步操作后，弹出窗口阻止程序在所有情况下都会通过我的测试触发，这会出现问题。为了解决这个问题，您可以看到示例中有一个嵌入式的

IFRAME

，它会刷新（在2秒钟的数据库保存完成后）并显示提交的值

复杂性主要通过jQuery进行处理，在jQuery中，

IFRAME

刷新发生在我们知道

POST

请求已提交之后：

<!doctype html>
<html>
  <head>
    <style>
      .busy {
        cursor: wait !important;
      }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
    <script type="text/javascript">
      $('document').ready(function () {

        function refreshViewer() {
          window.open("/2", "viewer");
          document.getElementById('submissionFrame').contentWindow.location.reload(true);
        }

        $('form input#submitLink').on('click', function () {
          var linkValue = $('input#link').serialize();
          $('body').addClass('busy');
          $.post('/', linkValue)
            .done(function(data) {              
              $('body').removeClass('busy');
              $('input#link').val('');
              refreshViewer();
            });           
          return false;
        });
      });
    </script>
  </head>
  <body>
    <div class="container">
      <form id="urlarticle" method="POST">
        <input type="text" name="link" placeholder="Link" id="link" />
        <input type="button" value="Submit" id="submitLink" />
      </form>

      <iframe id="submissionFrame" src="/2" seamless="seamless" width="50%" style="margin-top:100px">

      </iframe>
    </div>
  </body>
</html>


.忙{
游标：等等！重要的；
}
$（'document'）.ready（函数（）{
函数refreshViewer（）{
窗口。打开（“/2”，“查看器”）；
document.getElementById（'submissionFrame'）.contentWindow.location.reload（true）；
}
$（'form input#submitLink'）。在（'click'，函数（）{
var linkValue=$（'input#link'）.serialize（）；
$（'body'）.addClass（'busy'）；
$.post（'/'，linkValue）
.done（函数（数据）{
$（'body'）.removeClass（'busy'）；
$（'input#link'）.val（''）；
刷新查看器（）；
});           
返回false；
});
});

异步控制流库将有助于解决第一个问题。例如，使用允许使用承诺将序列链接在一起。我不知道你的第二个问题是什么意思，我不明白这个链接代表什么。我会看看蓝鸟，谢谢。关于第二个问题，它有点混乱，所以我编辑了这篇文章，事实上已经没有第二个问题了。好吧，很好，让我看看，并给出一个更好的答案。看起来可运行代码有一个多余的要求（“蓝鸟”）？它在谷歌（对我来说）的蓝鸟搜索排名相当高，而且似乎没有什么关系？@jimm101你说得对，我使用了一个旧的Runnable来回答这个问题。我会更新。。。

<script type='application/javascript'>
    $("#urlarticle").submit(function() {
    var linkValue = $('input[name="thislink"]').val();
    window.open('/selection/yes/?value='+linkValue);
    });
</script>

app.get('/selection/yes/', function(req, res) {
    var thislink = req.param("value");
    // parts omitted here
    res.render('selection_form.ejs'); 
    });
});

<!doctype html>
<html>
  <head>
    <style>
      .busy {
        cursor: wait !important;
      }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
    <script type="text/javascript">
      $('document').ready(function () {

        function refreshViewer() {
          window.open("/2", "viewer");
          document.getElementById('submissionFrame').contentWindow.location.reload(true);
        }

        $('form input#submitLink').on('click', function () {
          var linkValue = $('input#link').serialize();
          $('body').addClass('busy');
          $.post('/', linkValue)
            .done(function(data) {              
              $('body').removeClass('busy');
              $('input#link').val('');
              refreshViewer();
            });           
          return false;
        });
      });
    </script>
  </head>
  <body>
    <div class="container">
      <form id="urlarticle" method="POST">
        <input type="text" name="link" placeholder="Link" id="link" />
        <input type="button" value="Submit" id="submitLink" />
      </form>

      <iframe id="submissionFrame" src="/2" seamless="seamless" width="50%" style="margin-top:100px">

      </iframe>
    </div>
  </body>
</html>