使用ajax判断用户是否已经存在,并提示。

 
使用ajax判断用户是否已经存在,并提示。
 
<html>
<br/>

<script>
        $(document).ready(
                        function()
                                 {
                                        $("#username").blur(function() 
                                        {
                                                var q=$(this).val()
                                        
                                        $.get('/checkuserexists/'+q,function(data,status)
                                                {
                                        //alert("val: "+q+ "Data: " + data + "\nStatus: " + status);
                                                        if(data!='0'){ 
                                                                //alert('user exists~~');
                                                                //alert($("#username").parent().html())
                                                                old=$("#username").parent().html();
                                                                //alert(old);
                                                        errormsg='<strong class="wrong">user exists</strong>';
                                                                $("#username").parent().html(old+errormsg)
                                        }

                                                }
                                              )
                                        
                                        //alert($(this).val());
                                        });
                                }
                        )
</script>

<h1>Register</h1>
<form method="POST">
    <table>
    <tr><th><label for="username">username</label></th><td><input type="text" id="username" value="" name="usernam
e"/></td></tr>
    <tr><th><label for="email">E-Mail</label></th><td><input type="text" id="email" value="11" name="email"/><stro
ng class="wrong">must be a valid email address</strong></td></tr>
    <tr><th><label for="password">Password</label></th><td><input type="password" id="password" value="" name="pas
sword"/><strong class="wrong">must be between 3 and 20 characters</strong></td></tr>
    <tr><th><label for="password2">Repeat password</label></th><td><input type="password" id="password2" value="" 
name="password2"/></td></tr>
    <tr><th><label for="submit"></label></th><td><button type="submit" id="submit" value="submit" name="submit">su
bmit</button></td></tr>
</table>
</form>
<a href='/listusers'>view all users</a>



</body>
</html>

使用Ajax判断用户是否存在的步骤如下: 1. 在前端页面中,创建一个文本框用于输入用户名,以及一个按钮用于触发Ajax请求。 2. 给按钮添加一个点击事件,在事件处理程序中获取文本框中输入的用户名。 3. 使用Ajax发送POST请求到后端服务器,传递用户名参数。 4. 后端服务器接收到请求后,查询数据库中是否存在用户名,如果存在返回一个响应,否则返回另一个响应。 5. 前端通过Ajax的回调函数获取到服务器的响应,并根据响应结果给出相应的提示信息。 以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax判断用户是否存在</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $("#checkBtn").click(function () { var username = $("#username").val(); $.ajax({ type: "POST", url: "check_user.php", data: {username: username}, success: function (result) { if (result == "exist") { alert("该用户存在!"); } else { alert("该用户存在!"); } } }); }); }); </script> </head> <body> <label>用户名:</label> <input type="text" id="username"> <button id="checkBtn">检查用户</button> </body> </html> ``` 在上面的示例中,我们使用了jQuery库来简化Ajax的操作。在点击按钮时,会获取文本框中输入的用户名,并通过Ajax发送POST请求到check_user.php页面。check_user.php页面接收到请求后,会查询数据库中是否存在用户名,如果存在返回"exist",否则返回"not exist"。前端通过Ajax的回调函数获取到服务器的响应,并根据响应结果给出相应的提示信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值