如何使用jQuery禁用/启用按钮？

Question

我正在为一个课堂项目工作，而我在这种事情上几乎是绝对的初学者。 我有一台在Ubuntu上运行的服务器。 在script.js中，我有

$(document).ready(function(){
    $.get('/var/www/html/hadoopstatus.txt', function(response) {
        var $hadoopstatus = response;
    }, "text");
    if ($hadoopstatus == 'Running'){
        document.getElementById('b2').disabled = false;
    }
    if ($hadoopstatus == 'Stopped'){
        document.getElementById('b1').disabled = false;
    }
});

在index.html中，我有

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
// some stuff
</head>

<body>
// stuff
<form method="post">
<button type="submit" id="b1" disabled>Start Hadoop</button>
<button type="submit" id="b2" disabled>Stop Hadoop</button>
</form>
// stuff
</body>

/var/www/html/hadoopstatus.txt仅包含

Running

我遇到的问题是按钮（在这种情况下为“ Stop Hadoop”按钮）将无法启用。 我究竟做错了什么？

Answer 1

$ .get函数是异步的，因此您必须等待它完成。

因此将您的代码更改为：

 $.get('/var/www/html/hadoopstatus.txt', function(response) {
   var $hadoopstatus = response;
   if ($hadoopstatus == 'Running') {
     document.getElementById('b2').disabled = false;
   }
   if ($hadoopstatus == 'Stopped') {
     document.getElementById('b1').disabled = false;
   }
 }, "text");

完全控制：

var jqxhr = $.get('/var/www/html/hadoopstatus.txt', function(response) {
  alert( "success" );

  if (response == 'Running') {
     document.getElementById('b2').disabled = false;
   }
   if (response == 'Stopped') {
     document.getElementById('b1').disabled = false;
   }


}, "text")
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });

Answer 2

你有两个问题。 首先是您在回调函数中定义了$hadoopstatus变量。 退出回调函数后，该变量将被清除。 但是另一个更严重的问题是您要进行AJAX调用，这可能需要几秒钟才能完成。 但是，在发起该调用之后，您将立即检查$hadoopstatus的值。

这是异步编程的问题。 您需要记住，启动AJAX调用将在一段时间后结束。 这就是为什么有一个回调函数。 该代码将在AJAX调用完成加载数据后运行，无论是几毫秒还是10秒。

我调整了代码，以使所有业务逻辑都适合您的回调函数。 AJAX调用完成后，它将从响应中创建$hadoopstatus变量，然后检查该值并禁用相应的按钮。

$(document).ready(function(){
    $.get('/var/www/html/hadoopstatus.txt', function(response) {
        var $hadoopstatus = response;
        if ($hadoopstatus == 'Running'){
            document.getElementById('b2').disabled = false;
        }
        if ($hadoopstatus == 'Stopped'){
            document.getElementById('b1').disabled = false;
        }
    }, "text");

});

请记住， $hadoopstatus的值在此函数之外将不可用，因为您在函数内部创建了“ var”。 函数完成后，变量也将完成。 如果在AJAX调用之前使用“ var”命令，您仍然会遇到问题，因为由于加载延迟，当您的代码尝试运行它时，它可能不包含该值。 换句话说，在期望您的AJAX调用是瞬时的时要小心。 可能不会。

Answer 3

另一个可能的解决方案是：

$(function() {
  $.get('hadoopstatus.txt', function(response) {
    switch (response.trim()) {
      case 'Running':
        document.getElementById('b2').disabled = false;
        break;
      case 'Stopped':
        document.getElementById('b1').disabled = false;
        break;
    }
  }, "text");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<form method="post">
    <button type="submit" id="b1" disabled>Start Hadoop</button>
    <button type="submit" id="b2" disabled>Stop Hadoop</button>
</form>

在.get函数中评估响应。 这是一个异步功能。

如何使用jQuery禁用/启用按钮？

问题描述

3 个解决方案

解决方案1
1 2016-03-07 21:22:00

解决方案2
0 2016-03-07 21:31:29

解决方案3
0 已采纳 2016-03-07 21:35:29

如何使用jQuery禁用/启用按钮？

问题描述

3 个解决方案

解决方案1 1 2016-03-07 21:22:00

解决方案2 0 2016-03-07 21:31:29

解决方案3 0 已采纳 2016-03-07 21:35:29

解决方案1
1 2016-03-07 21:22:00

解决方案2
0 2016-03-07 21:31:29

解决方案3
0 已采纳 2016-03-07 21:35:29