尝试在 html 页面中实现 jquery/ajax [英] Trying to implement jquery/ajax into html page

问题描述

    echo "<form method='post' action='regprocess.php' id='registerform'>";
        echo '<fieldset class="register">';
        echo"<h2>Register</h2>";
            echo "<ul>";
                    echo '<li><label for="FirstName">First Name: </label> <input type="text" name="FirstName" id="FirstName"></li>';
                    echo '<li><label for="LastName">Last Name: </label> <input type="text" name="LastName" id="LastName"></li>';
                    echo '<li><label for="Email">Email: </label><input type="email" name="Email" id="Email"></li>';
                    echo '<li><label for="Username">Username: </label><input type="text" name="Username" id="Username"></li>';
                    echo '<li><input type="button" id="check_username_availability" value="Check Availability"></li>';  
                    echo '<div id="username_availability_result"></div>'; 
                    echo '<li><label for="Password">Password: </label><input type="password" name="Password" id="Password"></li>';
                    echo '<li><input type="submit" value="Register"></li>';
                    echo "</ul>";
        echo "</fieldset>";
        echo "</form>";
        }
        $username = mysql_real_escape_string($_POST['Username']);  

//mysql query to select field username if it's equal to the username that we check '  
$usernameresult = 'Select Username from User where Username = "'. $username .'"'; 
$uresult = $conn->query($usernameresult); 

//if number of rows fields is bigger them 0 that means it's NOT available '  
if($uresult->num_rows==1) {  
    //and we send 0 to the ajax request  
    echo 0;  
}else{  
    //else if it's not bigger then 0, then it's available '  
    //and we send 1 to the ajax request  
    echo 1;  
}  
?>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
$(document).ready(function() {  

        var checking_html = 'Checking...';  

        //when button is clicked  
        $('#check_username_availability').click(function(){  
            //run the character number check  
            if($('#username').val().length < min_chars){   
                $('#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("check_username.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{  
                    //show that the username is NOT available  
                    $('#username_availability_result').html(username + ' is not Available');  
                }  
        });  

}
</script>

大家好，所以我正在尝试制作一个表单来验证我的数据库中是否有可用的用户名.我以前有点用过 javascript，但我没有用 Ajax 和 JQuery 做过很多事情.我不断在控制台中收到此错误消息参考错误:找不到变量:$响应这行脚本$(document).ready(function() {
我不太确定为什么，我只是想知道是否有人能给我一些有关如何解决它的见解?谢谢.

Hi everyone, So i'm trying to make a form that will validate if there is a username avaliable in my database. I've kinda of used javascript before, but I haven't done a lot with Ajax and JQuery. I keep getting this error message in the console that says ReferenceError: Can't find variable: $ which responds to this line of script $(document).ready(function() {
I'm not really sure why, and I was just wondering if anyone can give me some insight on how to fix it? thank you.

推荐答案

代码看起来还行.唯一的问题我觉得你对jquery库的引用不对.查看源代码并单击jquery library包括行来测试是否路径好不好.将 jquery-1.8.1.min.js 保存在这些 php 文件所在的同一文件夹中，或者使用任何 CDN 库，如

The code seems okay.Only problem I think your reference to jquery library is not right.See the source code and click on the jquery library including line to test whether the path is fine or not. Keep the jquery-1.8.1.min.js on the same folder where these php files are or use any CDN libray like

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

希望能帮到你！！

这篇关于尝试在 html 页面中实现 jquery/ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！