在同一页上使用 Ajax & PHP,一次又一次地附加整页内容
Using Ajax & PHP on same page, appending full page content again and again
我想在同一页面上使用 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>
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>
我想在同一页面上使用 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>
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>