jQuery的ajax实现登录验证

最新推荐文章于 2024-06-21 16:41:46 发布

weixin_34203426

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量502

点赞数

文章标签： javascript php json ViewUI

原文链接：http://www.cnblogs.com/tobemaster/p/5361909.html

版权

这篇文章主要讲一下$.post方法来实现ajax

登陆页面代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <title>login</title>
</head>
<body>
<form action="login.php" method="post">
    登录名：<input type="text" name="username">
    <div id="massage"></div>
    密码：<input type="password" name="password">
    <input type="submit" value="提交">
    <a href="register.html">注册</a>
</form>
<script type="text/javascript">
    $(function(){
        $(':input[name="username"]').change(function() {
            txt=$(':input[name="username"]').val();
            $.post("ajax.php",{username:txt},function(result){
                $("#massage").html(result);
            });
        });
    });
</script>
</body>
</html>

ajax.php页面的代码

<?php
$mysqli = new mysqli('localhost', 'root', '', 'java');
if($username=$_POST['username']){
    $result = $mysqli->query("SELECT * FROM user WHERE username="."'$username'");
    $rs1=$result->fetch_row();
    if($rs1){
        $arr = "<font color='red'>用户已经存在</font>";
        echo $arr;
    }
    else{
        $arr = "<font color='green'>此用户可用</font>";
        echo $arr;
    }

}





register页面代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <title>register</title>
</head>
<body>
<form action="register.php" method="post">
    登录名：<input type="text" name="username">
    <div id="massage"></div>
    密码：<input type="password" name="password">
    重复密码：<input type="password" name="password2">
    <div id="massage1"></div>
    <input type="submit" value="提交">
    <a href="index.html">登陆</a>
</form>
<script type="text/javascript">

    $(function(){

        $(':input[name="username"]').change(function() {
            txt=$(':input[name="username"]').val();
            $.post("ajax.php",{username:txt},function(result){
                $("#massage").html(result);
            });
        });

        $(':input[name="password2"]').change(function() {
            txtpass=$(':input[name="password"]').val();
            txtpass2=$(':input[name="password2"]').val();
            if(txtpass&&txtpass2){
                $.post("regajax.php",{password:txtpass,password2:txtpass2},function(result){
                    $("#massage1").html(result);
                });
            }

        });


        $(':input[name="password"]').change(function() {
            txtpass=$(':input[name="password"]').val();
            txtpass2=$(':input[name="password2"]').val();
            if(txtpass&&txtpass2){
                $.post("regajax.php",{password:txtpass,password2:txtpass2},function(result){
                    $("#massage1").html(result);
                });
            }

        });


    });



</script>
</body>
</html>


regajax.php代码

<?php
if($_POST['password']){
    if($_POST['password2']){
        if($_POST['password']!=$_POST['password2']){
            $arr = "<font color='red'>两次密码输入不一致</font>";
            echo $arr;
        }
    }


}





以上是代码部分
需要注意的几点是

//事件触发执行的代码放在一个空的$(function(){});中

1.$(function(){

    $(':input[name="username"]').change(function() {
        txt=$(':input[name="username"]').val();
        $.post("ajax.php",{username:txt},function(result){
            $("#massage").html(result);
        });
    });
});

2.

$(':input[name="username"]').change  这是某一标签的某一个name属性的表示方式

3. $.post(发送到的地址,发送的参数{key：values，key2：values2}，回调函数function(随便用一个参数表示返回的数据){返回数据之后执行的函数语句})

4.$arr = "<font color='green'>此用户可用</font>";

echo $arr;
返回HTML格式  直接echo就算是返回了
如果返回一个json格式的话，需要用  echo json_code($arr);

转载于:https://www.cnblogs.com/tobemaster/p/5361909.html

weixin_34203426

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的ajax实现登录验证

这篇文章主要讲一下$.post方法来实现ajax登陆页面代码<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.7.1.min.j...
复制链接

扫一扫