使用ajax和jquery进行验证

Question

This is what I've done so far.

<span id="error_para">*</span> Username:<input type="text" name="field_username" oninvalid="setCustomValidity('Please Enter Unique Username.');" oninput="setCustomValidity('');" required id="username"  />&nbsp;&nbsp;

 <input type='button' id='check_username_availability' name="button1" value='Check Availability'><br />  
 <br />
 <div id='username_availability_result'></div>  <br />

<script>

$(document).ready(function() {  

    //the min chars for username  
    var min_chars = 3;  

    //result texts   
    var checking_html = 'Checking...';  

    //when button is clicked  
    $('#check_username_availability').click(function(){  
        //run the character number check  
        if($('#username').val().length < min_chars){  
            //if it's bellow the minimum show characters_error text '  
            $('#username_availability_result').html(characters_error);  
        }else{  
            //else show the cheking_text and run the function to check  
            $('#username_availability_result').html(checking_html);  
            check_availability();  
        }  
    });  

 });  
//function to check username availability  
function check_availability(){  

    //get the username  
    var username = $('#username').val();  

    //use ajax to run the check  
    $.post("validateusername.php", { username: username }, 
        function(result){  
            //if the result is 1  
            if(result == 1 ){  
                //show that the username is available  
                $('#username_availability_result').html(username + ' is Available');  
            }else if(result == 0){  
                //show that the username is NOT available  
                $('#username_availability_result').html(username + ' is not Available');  
            }else{  
                //show that the username is NOT available  
                $('#username_availability_result').html(username + ' is not procced');  
            }  

    });  

But it just shows that username is not proceed.I think that there is a problem with data transfer with my php file.

my validateusername.php file:

<?php


if( isset( $_POST['button1'] ) )
{
//get the username  
$username = mysqli_real_escape_string($_POST['username']);  

$mysqli = new mysqli("localhost", "jigar", "admin", "demo1");

/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s
", mysqli_connect_error());
exit();
}

$query = mysqli_query($mysqli, "SELECT username FROM logindata WHERE     username= '$username' " ) or die(mysqli_error($mysqli));

if (mysqli_num_rows($query) > 0){
    echo "0";  
} else {   
    echo "1";   
}

$mysqli->close();
}   
?>

Answer 1

In your ajax you are only sending username in ajax data:

$.post("validateusername.php", { username: username }, 

And in PHP you are using

if( isset( $_POST['button1'] ) )

Your ajax request not contains this. It should be

if( isset( $_POST['username'] ) )

Or

if( count( $_POST) > 0)

Side note:

Don't know why are you mixing mysqli procedural and OOP style together.