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不是编程语言,只是一种在无需重新加载整个网页的情况下能够更新部分 ...
随机推荐
- EzHttp 流传输调用代码示例
EzHttp框架提供的内置接口,用于文件流等传输 流传输调用代码示例 内置接口: public interface IEzStreamHandler { Task<byte[]> GetD ...
- 进程间通信系列 之 命名管道FIFO及其应用实例
进程间通信系列 之 概述与对比 http://blog.csdn.net/younger_china/article/details/15808685 进程间通信系列 之 共享内存及其实例 ...
- 高性能日志类KLog（已开源代码）
项目开源地址:https://github.com/ihambert/KLog 上回介绍了超简易日志类,但他有诸多的局限性,注定了不能作为一个网站的日志类. 那什么样的日志类才能用于网站呢.首先来假 ...
- Java 第一个程序案HelloWorld例记录
1.编辑源代码,先看代码: class HelloWorld{ public static void main(String[] args) { System.out.println("He ...
- Docker学习总结（一）
<认识Docker> 不定期更新~~~~~~~ 历史区别: 13年之前:网络大多使用"协议栈堆叠"的形式进行开发,需要部署单一专有的服务器进行操作.包括(中间件,运行时 ...
- WOW.js轻松为网页添加动画切入效果
由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点 Y(^o^)Y~ . 今天就和大家 ...
- OC点语法介绍和使用以及@property关键字
使用"点语法" Person *p =[Person new]; //点语法 //对象.属性名 //注意,此时 (p.age)并不是直接方法实例对象 //而是xcode可能到点语法 ...
- 二、Windows基础数据类型
六.Windows Data Types 简介: 6.1.这些数据类型都是C语言数据类型的再次的进行包装. 6.2.因为考虑到如果使用的是C中的基础数据类型可能无法表示,想表示的精准的含义. 6.3. ...
- 使用java API操作hdfs--通过filesystem API 来读取数据
上面的Path的包是导入错误了,nio中的包是抽象类,是无法创建的,所以换地方更改. 修改之后,指定jar包之后,编译成功,如下,并进行文件的读取操作,依然是成功啦:
- 学习笔记：javascript内置对象：数学对象
1.数学对象 -Math 2.对象常用属性 3.常用函数 4.对数值类型数据保留小数的函数