ajax基础部分

今天讲了ajax的组成及使用方法：首先我们看看一个简单的ajax的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<input type="text" id="uid" />

<span id="tishi"></span>

</body>

<script type="text/javascript">

$("uid").blur(function(){

    //1.取内容

    var uid = $(this).val();

    //2.拿内容去数据库验证

    $.ajax({

        url:"chuli.php", //请求地址

        data:{yhm:uid},  //要提交的数据

        type:"POST",   //提交的方式

        dataType:"TEXT", //返回类型 TEXT字符串；JSON;XML

        success:function(data){//回调函数

            if(data==0)

            {

                $("#this").text("该用户名可用");

                $("#this").css("color","green");

            }

            else

            {

                $("#this").text("该用户名已存在");

                $("#this").css("color","red");

            }

            }

        })

    //3.给出提示

    })

</script>

</html>

我们可以看到里面有一些常用的类型：url,data,type,dataType,以及验证成功后的返回操作方法：success。上面都做了详细的注释，便于理解，下面是处理页面：

<?php

$uid = $_POST["yhm"];

include("DBDA.class.php");

$db = new DBDA();

$sql = "select count(*) from users where uid='{$uid}'";

$arr = $db->Query($sql);

echo $arr[0][0];

这里面没有任何的逻辑处理，只有简单的数据验证和处理。所有的逻辑处理都在客户端页面里面。

下面让我们做一个登陆的ajax页面：

首先看登录页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<h1>登录页面</h1>

<div>用户名：<input type="text" id="uid" /></div>

<div>密&nbsp;码:<input type="text" id="pwd" /></div>

<input type="button" id="btn" value="登录" />

</body>

<script type="text/javascript">

$("btn").click(function(){

    //1.取数据

    //2.验证数据

    //3.提示

    var uid = $("#uid").val();

    var pwd = $("#pwd").val();

    $.ajax({

        url:"dlchuli.php",

        data:{uid:uid,pwd:pwd},

        type:"POST",

        dataType:"TEXT",

        success: function(data){

            //使用data之前，对data进行去空格处理

            if(data.trim()=="OK")

            {

                window.location.href = "main.php";

            }

            else

            {

                alert(用户名或密码错误);

            }

        }

        });

    })

</script>

</html>

ajax基础部分

显示效果如上图：

其次是处理页面：

<?php

include("DBDA.class.php");

$db = new DBDA();

$uid = $_POST["uid"];

$pwd = $_POST["pwd"];

$sql = "select pwd from users where uid='{$uid}'";

$arr = $db->Query($sql);

if($arr[0][0]==$pwd && !empty($pwd))

{

    echo "OK";

}

else

{

    echo "NO";

}

这样就能实现登陆处理页面，并且不会让用户访问数据库，大大增加了用户体验性和安全性。

相关文章