Question

对node.js和Jquery来说是新手。

在按钮上的以下代码中单击我已运行任务，我们无法预测该任务何时完成在完成任务时，我将获得测试结果并存储在DB中。

这是我的HTML代码

<table>
  <tr>
    <td style="height:10px;">
      <div id="testResult" style="padding-left: 120px; display: none; ">
        <img src="./images/spinner.gif" />Running the test...
      </div>
    </td>
  </tr>
</table>
<button id="runBtn">RUN</button>

按钮单击首先我编写代码来运行任务，我们无法预测它何时完成。在DB中存储数据后我必须获取该数据，我也必须调用按钮点击功能。 / p>

$('#runBtn').click(function() {
var unitData 
.....
.....
// For running the task
   $.ajax({
      type: "post",
      url: "/runTask",
      dataType: "json",
      data: unitData,
      success: function (value) {
        console.log("Data saved succesfully");
      },
    });

// For fetching the result of task      

    $('#testResult').html('<img src="./images/spinner.gif" /> Running the test...');
        $('#testResult').show();
        $.ajax({
          url: '/getReport',
          cache: false
        }).done(function (html) { 
          $("#testResult").html( htm );
          $('#edit').removeAttr("disabled");
        }).fail(function () {
          $("#testResult").html("Failed to run the test");
          $('#edit').removeAttr("disabled");
        });      

    })

我需要的是按钮单击我必须显示一个微调器图像，测试正在运行...（我们无法预测何时将测试complte）和测试完成后在db中存储数据（它工作正常）并且必须显示网页中的数据并消失微调图像。

现在发生了什么，当我点击运行按钮时，测试将会运行，同时调用'/gerReport'并返回null值。我需要在测试结果来之后调用/getReport显示带有文本测试的微调器图像正在运行..

Answer 1

你走了：

var $testResultElement = $("#testResult"),
    onRunTaskCompleted = function () {
        console.log("Data saved succesfully");

        // Task running is complete, so now we can get the report
        $.ajax({
            url: '/getReport',
            cache: false
        }).done(function (html) { 
            $testResultElement.html(html);
        }).fail(function () {
            $testResultElement.html("Failed to run the test");
        }).always(function () {
            $('#edit').removeAttr("disabled");
        });
    };

$('#runBtn').click(function() {
    // var unitData
    // .....
    // .....
    $testResultElement.html('<img src="./images/spinner.gif" /> Running the test...').show();

    // For running the task
   $.ajax({
        type: "post",
        url: "/runTask",
        dataType: "json",
        data: unitData,
        success: onRunTaskCompleted
    });

这是逻辑：

单击按钮时，首先显示微调器（运行测试...）
开始任务。请注意我是如何更改ajax的success属性的呼叫。我做了一个单独的功能来处理成功＆＃39;让你的代码更容易理解（为自己）
onRunTaskCompleted在任务完成时运行。它会打电话＆＃39; getReport＆＃39 ;.旋转器仍在旋转！
当电话＆＃39; getReport＆＃39;返回，我们设置返回的html，或者消息＆＃39;无法运行测试＆＃39;。我添加了一个始终回调从编辑按钮中删除已禁用的属性。这是因为你想在完成和失败时都这样做，而且总是如此理想的方式，因为它在完成和失败时运行。

Answer 2

当成功保存数据时，您可以使用您的代码

$('#runBtn').click(function() {
var unitData 
.....
.....
// For running the task
   $.ajax({
      type: "post",
      url: "/runTask",
      dataType: "json",
      data: unitData,
      success: function (value) {
        console.log("Data saved succesfully");

// For fetching the result of task  
        $('#testResult').html('<img src="./images/spinner.gif" /> Running the test...');
        $('#testResult').show();
       $.ajax({
         url: '/getReport',
        cache: false
       }).done(function (html) { 
         $("#testResult").html( htm );
         $('#edit').removeAttr("disabled");
       }).fail(function () {
         $("#testResult").html("Failed to run the test");
         $('#edit').removeAttr("disabled");
       }); 


      },
    });
})

在单击按钮时调用函数时出现JQuery代码问题

2 个答案: