AJAX的应用场景
1.异步搜索过滤内容数据
2.表单异步验证
3.异步加载页面“更多”数据
4.异步处理登录
5.异步处理用户名是否注册
AJAX的主要特点
1.在不刷新页面的情况下，与服务器进行异步交互
2.优化浏览器与服务器的数据传输，减少了不必要的数据往返
3.把部分数据处理转移到客户端，减少服务器压力
实现AJAX的基本思路
1.选择一个js类库
2.js部分向服务器传递数据
3.php接收传递的数据，处理数据，返回js
4.js接收php的数据，并做相应的处理
AJAX基础代码
$.ajax({
url:"loginchuli.php", //是连接到的页面
data:{uu:uid,pp:pwd}, //前边的uu是名字后边的uid是取到的值，前边的pp是名字后边的pwd是取到的值
type:"POST", //传递方式
dataType:"TEXT", //接受返回来的数据类型，有text/json/xml
success:function(data){ //成功后，返回的数据，用这回调函数接受一下，data是自己定义的名称，接收回来的数据就存到data里
alert(data);
} })
例子1：ajax异步验证登录
1.登陆界面
<body>
<div>用户名：<input type="text" id="uid"/></div>
<div>密码：<input type="password" id="pwd"/></div>
<div><input type="button" id="btn" value="登录"/></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
$("#btn").click(function(){
//取用户名和密码
var uid=$("#uid").val();
var pwd=$("#pwd").val();
//调用ajax,里边是json数据，所以要加上{}括号
$.ajax({
url:"loginchuli.php", //是连接到的页面
data:{uu:uid,pp:pwd}, //前边的uu是名字后边的uid是取到的值，前边的pp是名字后边的pwd是取到的值
type:"POST", //传递方式
dataType:"TEXT", //接受返回来的数据类型，有text/json/xml
success:function(data){ //成功后，返回的数据，用这回调函数接受一下，data是自己定义的名称，接收回来的数据就存到data里
alert(data);
if(data.trim()=="1") //判断返回来的数据是不是1，如果是1，让其跳转到主页面,data.trim()方法是把返回的数据去掉空格
{
window.location.href="main.php";
}
else
{
alert("用户名或密码错误");
}
}
});
})
});
2.登录处理界面
<?php
$uid=$_POST["uu"];
$pwd=$_POST["pp"];
include("DBDA.class.php");
$db=new DBDA();
$sql="select pwd from users where name=‘{$uid}‘"; //根据用户名查询密码
$mm =$db->Query($sql);
if(!empty($pwd) && !empty($mm) && $mm[0][0]==$pwd)
{
echo "1";
}
else
{
echo "0";
}
例子2：ajax判断用户名是否已经注册
1.输入页面
<input type="text" id="uid" />
<span id="jia"></span>
</body>
<script type="text/javascript">
$("#uid").blur(function(){ //blur()失去焦点时间
//取用户名
var uid = $("#uid").val();
//调AJAX
$.ajax({
url:"uidchuli.php",
data:{u:uid}, //传递给处理界面数据
type:"POST",
dataType:"TEXT",
success: function(data){
if(data>0)
{
$("#jia").html("该用户名已存在");
$("#jia").css("color","red");
}
else
{
$("#jia").html("该用户名可用");
$("#jia").css("color","green");
}
}
});
})
</script>
2.处理页面
<?php
$uid = $_POST["u"];
include("DBDA.class.php");
$db = new DBDA();
$sql = "select count(*) from users where uid=‘{$uid}‘";
echo $db->StrQuery($sql);
例子3：异步搜索过滤内容数据
1.显示页面
<style type="text/css">
*{ margin:0px auto; padding:0px}
.l{ width:200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; border-bottom:1px solid #C00}
</style>
</head>
<body>
<br />
<div style="width:200px; height:35px;border:2px solid #C00"><input style="width:196px; height:31px;" type="text" id="name" /></div>
<div id="list" style="width:200px;">
</div>
<script type="text/javascript">
$("#name").keyup(function(){ //特别注意keyup()方法 是当输入内容的变化时的事件
//取名称
var n = $(this).val();
if(n!="")
{
//调AJAX
$.ajax({
url:"listchuli.php",
data:{n:n},
type:"POST",
dataType:"TEXT",
success: function(data){
var sz = data.split("|"); //split()是把字符串分割成数组，是个二维数组
var str = "";
for(var i=0;i<sz.length;i++)
{
str = str+"<div class=‘l‘>"+sz[i]+"</div>"; //拼接div，然后扔给上面的框内
}
$("#list").html(str);
}
});
}
else
{
$("#list").html("");
}
})
</script>
2.处理页面
<?php
$name = $_POST["n"];
include("DBDA.class.php");
$db = new DBDA();
$sql = "select areaname from chinastates where areaname like ‘%{$name}%‘ ";
echo $db->StrQuery($sql);
时间： 2024-11-10 07:42:29