ajax 数据库 登录验证,14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库...

无标题文档

$.ajax({//()里面是JSON数据，外层要加上{}。

url:"chuli.php",//处理页面地址，表示ajax要用哪个页面处理

data:{code:"n001"},//传递到处理页面的值，也是JSON数据，要用{}。如果传2个值就在{}里面加逗号，再写另外1个值。

type:"POST",//传值方式，一般用POST方式，注意POST要大写。

dataType:".TEXT",//返回值的类型。1.TEXT文本，字符串。2.JSON数据 3.XML可扩展标记语言，主要用在数据传递。

success:function(data){//表示处理成功之后做什么,后面跟一个匿名函数。回调函数，表示处理页面处理完数据以后执行这个函数。data表示处理页面返回的值，用形参接收。

},

error:function(){//处理页面出错以后执行的函数。

}

});

chuli.php

$code = $_POST["code"];

include("../DBDA.class.php");

$db = new DBDA();

$sql = "select name from nation where code=‘{$code}‘";

echo $db->StrQuery("$sql");//ajax的数据返回的话就直接输出

2.用ajax做登录页面

denglu.php

无标题文档

用户名：

密码：

$(document).ready(function(e) {

$("#btn").click(function(){//给按钮加点击事件

//取用户名和密码

var u = $("#uid").val();//取输入的用户名

var p = $("#pwd").val();//取输入的密码

//调ajax

$.ajax({

url:"dengluchuli.php",

data:{u:u,p:p},//第二个u和p只是变量，可以随意写，dengluchuli.php里面的u和p都是第一个。

type:"POST",

dataType:"TEXT",

success: function(data){

if(data.trim()=="OK")//要加上去空格，防止内容里面有空格引起错误。

{

window.location.href="main.php";//js跳转页面，要记住。

}

else

{

echo("用户名或密码错误");

}

}

});

})

});

dengluchuli.php

$uid = $_POST["u"];

$pwd = $_POST["p"];

include("../DBDA.class.php");

$db = new DBDA();

$sql = "select password from login where username=‘{$uid}‘";

$mm = $db->StrQuery($sql);

if($mm == $pwd && $pwd!="")

{

echo "OK";

}

else

{

echo "NO";

}

3.用ajax验证用户名是否可用

testuid.php

无标题文档

$("#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)

{

$("#ts").html("该应户名已存在");

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

}

else

{

$("#ts").html("该应户名可用");

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

}

}

});

})

uidchuli.php

$uid = $_POST["u"];

include("../DBDA.class.php");

$db = new DBDA();

$sql = "select count(*) from login where username=‘{$uid}‘";

echo $db->StrQuery($sql);

4.动态调用数据库，搜索框里输入关键字，内容中含关键字的自动出现在输入框下面。

list.php

无标题文档

*{ margin:0px auto; padding:0px}

.l{ width:200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; border-bottom:1px solid #60F}

$("#name").keyup(function(){

//取名称

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

if(n!="")

{

//调ajx

$.ajax({

url:"listchuli.php",

data:{n:n},

type:"POST",

dataType:"TEXT",

success: function(data){

var sz = data.split("|");

var str = "";

for(var i=0;i

{

str = str+"

"+sz[i]+"

";

}

$("#list").html(str);

}

});

}

else

{

$("#list").html("");

}

})

listchuli.php

$name = $_POST["n"];

include("../DBDA.class.php");

$db = new DBDA();

$sql = "select areaname from chinastates where areaname like‘%{$name}%‘";

echo $db->StrQuery($sql);

14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

标签：ajax验证   jscript   states   .class   方式   回调函数   ext   idc   china