在php oop结构中检查Ajax用户名可用性

Question

Understanding how ajax works has been really difficult for me. I think it's mainly because, somehow, I ended up writing php code in oop structure (I am a beginner, and it happened because of this php book about oop I read when I first started learning php), and I seem to have a problem connecting php class file (functions inside it) to ajax function.

I am trying to add a real-time username availability check feature to my web application (like the one you see in twitter's signup page).

I have two files, register.php and class.register.php

Inside register.php file, there are some php code that fires class.register.php file, some html code, and some ajax code (haven't separated javascript file yet).

php part of register.php file looks like this,

<?php
require_once 'class/class.register.php';
$register = new Register();
if(isset($_POST['picked_username'])){
    $register->ajax_username();
}
?>

html part of register.php file looks like this,

<input type="text" name="username_input" id="username_input" value="" />
<span id="validate_username"></span>

ajax part of register.php file looks like this,

$("#username_input").keyup(function(){

    var picked_username = $("#username_input").val();
    $("#validate_username").text("loading…");

    $.ajax({
        type:"post",
        url:"register.php",
        data:{"picked_username":picked_username},
        success:function(result){
            if(result == "0"){
                $("#validate_username").text("available");
            }else if(result == "1"){
                $("#validate_username").text("not available");
            }
        },
        error:function(){
            $("#validate_username").text("something is wrong");
        }
    });
    return false;
});

So basically, when you type something in the username_input area, it sends the data to the same page (register.php), and then triggers isset($_POST['picked_username']) php code on top of the page, which then calls ajax_username(); function in the class.register.php file.

And this is the ajax_username(); function in class.register.php file (used PDO).

public function ajax_username(){
    $picked_username = $_POST['picked_username'];

    $query = "SELECT username FROM mytable WHERE username = '$picked_username' LIMIT 1";
    $result = $this->db->query($query);
    $number = $result->rowCount();

    if($number == 0){
        echo '0';
    }elseif($number == 1){
        echo '1';
    }
}

And unfortunately, nothing happens. Can anyone please tell me what the problem is?

When I do UPDATE or INSERT query instead of SELECT, it actually works fine. For instance, I used a very similar code to update checkbox value in the database with ajax.

public function update_checkbox(){
    $check_box = $_POST['check_box'];
    $query = "UPDATE mytable SET checkbox = '$check_box' WHERE id = $myid LIMIT 1";
    $result = $this->db->query($query);
}

I think this code works because it doesn't echo anything. And I don't think my ajax code is receiving any value from echo.

Please help me! I've been struggling with this problem for a while. Thank you so much in advance!

Answer 1

Ok so thinking about what you said regarding the HTML being returned. Your code is this...

<?php
require_once 'class/class.register.php';
$register = new Register();
if(isset($_POST['picked_username'])){
    $register->ajax_username();
}
?>

The problem (or at least part) is after $register->ajax_username(); is called I imagine the rest of your HTML page is being called after it. You will need to use exit() to prevent any additional code from being run. Try this

if($number == 0){
    exit('0');
}else{
    exit('1');
}

Also I can see rupesh-patel's point. The above is probably a more elegant solution. (we don't really need to check for any value other than 0).