首页 > 代码库 > AJAX部分---php-jquery-ajax；
AJAX部分---php-jquery-ajax；
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="http://www.mamicode.com/登录"/></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="http://www.mamicode.com/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);
AJAX部分---php-jquery-ajax；
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。