ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识
ajax是结合了jquery、php等几种技术延伸出来的综合运用的技术，不是新的内容。ajax也是写在<script>标签里面的。
如果使用ajax一定是要有1个处理页面的，处理页面只是操作数据库并且返回值，页面都是ajax处理的。
ajax的写法：
test.php
<!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" />
<script src="../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
<!--引入jquery包-->
<script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->
<style type="text/css">
</style>
</head>
<body> <script type="text/jscript">
$.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(){//处理页面出错以后执行的函数。 }
});
</script> </body>
</html>
chili.php
<?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
<!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" />
<script src="../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
</head>
<body>
<div>用户名：<input type="text" id="uid" /></div>
<div>密码：<input type="text" id="pwd" /></div>
<div><input type="button" value="登录" id="btn" /></div>
</body> <script type="text/javascript"> $(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("用户名或密码错误");
} } }); })
}); </script> </html>
dengluchuli.php
<?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
<!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" />
<script src="../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
</head> <body>
<input type="text" id="uid" />
<span id="ts"></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)
{
$("#ts").html("该应户名已存在");
$("#ts").css("color","red");
}
else
{
$("#ts").html("该应户名可用");
$("#ts").css("color","green");
}
} }); }) </script> </html>
uidchuli.php
<?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
<!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" />
<script src="../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
<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 #60F}
</style>
</head> <body>
<br />
<div style="width:200px; height:35px; border:2px solid #60F">
<input type="text" id="name" style="width:196px; height:31px" />
</div>
<div id="list" style="width:200px; height:500px; border:2px solid #60F; border-top:0px"></div>
</body> <script type="text/javascript">
$("#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<sz.length;i++)
{
str = str+"<div class='l'>"+sz[i]+"</div>";
}
$("#list").html(str); } });
}
else
{
$("#list").html("");
} }) </script> </html>
listchuli.php
<?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基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库的更多相关文章
- 使用PHP中的ajax做登录页面、验证用户名是否可用、动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- Ajax基础知识 浅析（含php基础语法知识）
1.php基础语法 后缀名为.php的文件 (1) echo 向页面中输入字符串 <?php 所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
- Ajax基础知识（二）
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
- ajax请求session失效重定向到登录页面
在ajax请求的页面引入一个自定义的AjaxRedirect.js的文件 AjaxRedirect.js的代码如下: $(function(){ $.ajaxSetup({ type: 'POST', ...
- Ajax基础知识梳理
Ajax用一句话来说就是无须刷新页面即可从服务器取得数据.注意,虽然Ajax翻译过来叫异步JavaScript与XML,但是获得的数据不一定是XML数据,现在服务器端返回的都是JSON格式的文件. 完 ...
- 【前端】之AJAX基础知识
AJAX 简介 AJAX(Asynchronous JavaScript and XML),异步的JavaScript和XML AJAX不是编程语言,只是一种在无需重新加载整个网页的情况下能够更新部分 ...
随机推荐
- 杜教筛 && bzoj3944 Sum
Description Input 一共T+1行 第1行为数据组数T(T<=10) 第2~T+1行每行一个非负整数N,代表一组询问 Output 一共T行,每行两个用空格分隔的数ans1,ans ...
- windows下nodejs安装及配置
1)在 http://nodejs.org/download/下载一个window的安装包 2)运行安装包,设置安装路径,如安装到D:\nodejs,安装后会自动将d:\nodejs添加到系统变量pa ...
- 给上传文件的input控件"美容"
作为一名前端程序猿呢,在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮.刚好菜鸟我最近工 ...
- MongoDB副本集的常用操作及原理
本文是对MongoDB副本集常用操作的一个汇总,同时也穿插着介绍了操作背后的原理及注意点. 结合之前的文章:MongoDB副本集的搭建,大家可以在较短的时间内熟悉MongoDB的搭建和管理. 下面的操 ...
- redis多数据库操作
redis下,数据库是由一个整数索引标识,而不是由一个数据库名称.默认情况下,一个客户端连接到数据库0. redis配置文件中下面的参数来控制数据库总数: databases 16 [root@M ...
- 解决css引用图片不显示问题：background-image: url(../image/document.png);
.icon-document { background-image: url(../image/document.png); display:block; float: left; width: 25 ...
- 深入理解Java常用类----String（二）
上篇介绍了String类的构造器,获取内部属性等方法,最后留下了最常用的局部操作函数没有介绍,本篇将接着上篇内容,从这些最常见的函数的操作说起,看看我们日常经常使用的这些方法的内部是怎么实现的.第一个 ...
- java内存模型7-处理器内存模型
处理器内存模型 顺序一致性内存模型是一个理论参考模型,JMM和处理器内存模型在设计时通常会把顺序一致性内存模型作为参照.JMM和处理器内存模型在设计时会对顺序一致性模型做一些放松,因为如果完全按照顺序 ...
- UDP协议详解
1．UDP协议的作用 IP协议无法区别同一个主机系统上的多个应用程序.UDP采用端口标识同一主机上的不同应用程序. 无法采取进程ID来标识不同应用程序的原因: 1)系统中应用程序的进程ID分配和销毁是 ...
- C语言解析17monipdb.dat(http://www.ipip.net/)免费数据库
官方给的链接打不开,而且里面的逻辑,每次都会打开文件,所以自己做了点个修改,发上来,借大家参考: #include <stdio.h> #include <stdlib.h> ...