首页 > 代码库 > ajax基础部分

ajax基础部分

2024-09-07 22:25:54   216人阅读

今天讲了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>

技术分享

显示效果如上图：

其次是处理页面：

<?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";
}

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

ajax基础部分


联系
我们