如果 ajax 给出错误消息，如何禁用按钮

Question

我想知道如何根据 ajax 返回的消息禁用和启用按钮。

<script>
    function showHint(str) {
        if (str.length == 0) {
            document.getElementById("ajax").innerHTML = "";
            return;
        } else {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("ajax").innerHTML = this.responseText;
                }
            };
            // xmlhttp.open("POST", 'Ajax.php?endpoint=' + str, true);
            xmlhttp.open("POST", 'Ajax.php?endpoint=' + str, true);
            xmlhttp.send();
        }
    }
</script>

<span id="ajax"></span>

这是应该禁用的按钮，以防 ajax 说端点无效，如果它是正确的，则应该启用它。

<div class="field">
    <div class="control">
      <input class="button is-danger is-fullwidth has-text-weight-bold" 
      type="submit"value="Suscribirse">
    </div>
</div>

PHP 代码

<?php

$a[] = "https://127.0.0.1";
$a[] = "https://127.0.0.2";


$q = $_REQUEST["endpoint"];

$hint = "";

if ($q !== "") {
  $q = strtolower($q);
  $len=strlen($q);
  foreach($a as $name) {
    if (stristr($q, substr($name, 0, $len))) {
      if ($hint === "") {
        $hint = $name;
      } else {
        $hint .= ", $name";
      }
    }
  }
}

echo $hint === "" ? "<p class='help is-danger'>El endpoint no es valido</p>" : "<p class='help is-success'>El endpoint es valido</p>";

?>

Answer 1

如果您修改 PHP 以返回更有用的响应 (JSON)，您可以在 ajax 回调中以有意义的方式使用其内容。

<?php

    $a[] = "https://127.0.0.1";
    $a[] = "https://127.0.0.2";


    $q = $_REQUEST["endpoint"];

    $hint = "";

    if($q !== "") {
    
      $q=strtolower($q);
      $len=strlen($q);
      
      foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
          if ($hint === "") {
            $hint = $name;
          } else {
            $hint .= ", $name";
          }
        }
      }
    }
    
    // create the response based upon the state of the $hint variable ( &/or other conditions too perhaps )
    $results=array(
        'status'    =>  empty( $hint ) ? false : true,
        'message'   =>  empty( $hint ) ? "<p class='help is-danger'>El endpoint no es valido</p>" : "<p class='help is-success'>El endpoint es valido</p>"
    );

    exit( json_encode( $results ) );

?>

然后调整 ajax 回调以使用响应 object 启用/禁用按钮：

function showHint(str) {
    let bttn=document.querySelector('.control > input[type="button"]');
    
    if (str.length == 0) {
        document.getElementById("ajax").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let json=JSON.parse(this.response);
                bttn.disabled=json.status;

                document.getElementById("ajax").innerHTML=json.message;
            }
        };
        xmlhttp.open("POST", 'Ajax.php?endpoint=' + str, true);
        xmlhttp.send();
    }
}