使用 Ajax 和PHP在同一页面上，一次又一次地附加整页内容

Question

我想在同一个页面上使用ajax和PHP。为此，我删除了 ajax 的 url 参数。现在，当我在文本框中输入内容时，它给出了我想要的结果，但它附加了一个新页面，其中包含 #check-username 内的所有元素。我不知道为什么它要附加新的文本框。请看一下我的代码。

<?php
global $wpdb; 
if(!empty($_POST["username"])) {
  $query = $wpdb->get_var("SELECT COUNT(*) FROM users WHERE username='" . $_POST["username"] . "'");
    ob_clean();
  if($query>0) {
    echo "<span style='color:red'> Sorry User already exists .</span>";
  }else{
    echo "<span style='color:green'> User available for Registration .</span>";
  }
}
?>

<span id="check-username"></span>
<label class="form-label" for="username">Username</label>
<input type="text" name="username" id="username" class="form-control"/>
                
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $('#username').on('input', function() {
    jQuery.ajax({
    data:'username='+$(this).val(),
    type: "POST",
    success:function(data){
        $("#check-username").html(data);
    },
    error:function (){}
    });
  });
});
</script>

Answer 1

exit; 并使用 isset 而不是 !empty 解决了所有问题。感谢@M。埃里克森

<?php
global $wpdb; 
if(isset($_POST["username"])) {
  $query = $wpdb->get_var("SELECT COUNT(*) FROM users WHERE username='" . $_POST["username"] . "'");
    ob_clean();
  if($query>0) {
    echo "<style>#username{border: 3px solid green;}</style>"; 
  }else{
    echo "<style>#username{border: 3px solid red;}</style>"; 
  }
exit;
}
?>

<span id="check-username"></span>
<label class="form-label" for="username">Username</label>
<input type="text" name="username" id="username" class="form-control"/>
                
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $('#username').on('input', function() {
    jQuery.ajax({
    data:'username='+$(this).val(),
    type: "POST",
    success:function(data){
        $("#check-username").html(data);
    },
    error:function (){}
    });
});});
</script>