Ajax 是 Asynchronous JavaScript and XML的缩写。

Ajax的优点:

优点:减轻服务器的负担,按需取数据,最大程度的减少冗余请求

局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验

基于xml标准化,并被广泛支持,不需安装插件等

进一步促进页面和数据的分离

Ajax包含下列技术:

基于web标准(standards-based presentation)XHTML+CSS的表示;

使用 DOM(Document Object Model)进行动态显示及交互;

使用 XML 和 XSLT 进行数据交换及相关操作;

使用 XMLHttpRequest 进行异步数据查询、检索;

使用 JavaScript 将所有的东西绑定在一起。  

也就是说Ajax最大的特点就是可以实现动态不刷新

使用Ajax:

例子:

在数据库中的一张表:

实现点击查看用户名是否可用:

主页面代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
输入一个用户名:<input type="text" id="zhang" />
<span id="tishi"></span>
</body>
</html>
<script>
//给文本框加上事件
$("#zhang").blur(function(){
//1取内容
var zhang = $(this).val();
//val取到表单元素、给变量 //2将取到的内容内容区数据库验证
//调用Ajax
$.ajax({
type:"POST",
//提交方式
url:"chuli.php",
//请求哪一个php文件(请求地址)
data:{yhm:zhang},
//给zhang取名yhm,传过去,是一个json
//请求处理页面需不需要传数据过去,不需要传不用写
dataType:"TEXT",
//处理页面返回的类型:TEXT字符串 JSON,JSON,XML,只有三种类型
success:function(data){
//回调函数
// data为返回的值
//成功之后要调用的函数
if(data==0)
{
//如果为0
$("#tishi").text("该用户名为0;可用!");
$("#tishi").css("color","green");
}
else
{
$("#tishi").text("该用户名已存在;不可用!");
$("#tishi").css("color","brown");
}
}
});
//3给出提示
})
</script>

接下来做处理页面:

<?php
$zhang = $_POST["yhm"];
//取值
include("db.class.php");
$db = new db();
$sql = "select count(*) from mydb where zhang = '{$zhang}'";
$arr = $db->Query($sql);
echo $arr[0][0];
//直接输出相当于返回 ?>

图:

输入已存在用户名:

输入不存在的用户名:

再来写一个登入:

登入页面的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>登入页面</h1>
<div>帐号<input type="text" id="zhang"/></div>
<div>密码<input type="text" id="mi"/></div>
<input type="button" id="btn" value="登入"/> </body>
</html>
<script>
$("#btn").click(function(){
//1取数据
var zhang = $("#zhang").val();
var mi = $("#mi").val();
//2验证数据
$.ajax({
url:"drcl.php",
data:{zhang:zhang,mi:mi},
type:"POST",
dataType:"TEXT",
success:function (data) {
//回调函数
//判断返回值
if(data=="ok")
{
window.location.href = "zym.php";
}
else
{
alert("用户名或密码错误");
} }
});
//提示
})
</script>

接下来是登入处理页面:

<?php
include ("db.class.php");
$db = new db();
$zhang = $_POST["zhang"];
$mi = $_POST["mi"];
//取值
$sql = "select mi from mydb WHERE zhang = '{$zhang}'";
$arr = $db->Query($sql);
if($arr[0][0]==$mi && !empty($mi))
{
echo "ok";
}
else
{
echo "no";
}
?>

来看一下图,如果输入的不对 直接在本页面提示:

输入的对就跳转:

用Ajax写登入的好处就是提示错误的时候不用跳到别的页面

Ajax基础与登入的更多相关文章

  1. Struts2+AJAX+JQuery 实现用户登入与注册功能。

    要求 必备知识 JAVA/Struts2,JS/JQuery,HTML/CSS基础语法. 开发环境 MyEclipse 10 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 关于U ...

  2. Struts2+AJAX+JQuery 实现用户登入与注册功能

    要求:必备知识:JAVA/Struts2,JS/JQuery,HTML/CSS基础语法:开发环境:MyEclipse 10 关于UI部分请查看下列链接,有详细制作步骤: 利用:before和:afte ...

  3. python基础篇---实战---用户登入注册程序

    一.首先了解需求: 1.支持多个用户登入 2.登入成功后显示欢迎,并退出程序 3.登入三次失败后,退出程序,并在下次程序启动尝试登入时,该用户名依然是锁定状态 二.文件代码如下: f = open(& ...

  4. Linux基础-配置网络、集群内主机名设定、ssh登入、bash命令、通配符(元字符)

    作业一:临时配置网络(ip,网关,dns)+永久配置 设置临时网络配置: 配置IP ifcongfig ens33 192.168.16.177/24 (ifconfig 网卡 ip地址    /24 ...

  5. 鸟哥Linux私房菜(基础篇)——第五章:首次登入与在线求助 man page笔记

    1.X Winsows与文本模式的切换 ●[Ctrl] + [Alt] + [F1] ~ [F6] :文字接口登入 tty1 ~ tty6 终端机.        ●[Ctrl] + [Alt] + ...

  6. [ASP.NET MVC] ASP.NET Identity登入技术应用

    [ASP.NET MVC] ASP.NET Identity登入技术应用 情景 ASP.NET Identity是微软所贡献的开源项目,用来提供ASP.NET的验证.授权等等机制.在ASP.NET I ...

  7. Web前端-Ajax基础技术(下)

    Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...

  8. 第十三节 Ajax基础

    什么是服务器:简单地,可以说服务器就是一个内存超大的计算机,可以存放很多数据和文件(当然,如果不需要太多的数据存储量,我们也可以用电脑.手机等一系列小型计算机作为服务器,只不过性能的差别而已) 网页浏 ...

  9. 自制“低奢内”CSS3登入表单,包含JS验证,请别嫌弃哦。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

随机推荐

  1. enum 用法

    public enum WeekDay { SUN(, "Sunday", "SUN"), MON(, "Monday", "MO ...

  2. MyBatis 一对多关联查询

    sqlxml文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC ...

  3. Java反射机制示例

    链接: http://www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html package com.stono.reftest; imp ...

  4. Codeforces758C

    C. Unfair Poll time limit per test:1 second memory limit per test:256 megabytes input:standard input ...

  5. HDU5874

    Friends and Enemies Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  6. CodeForces 456A

    Laptops Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit Sta ...

  7. linux脚本错误: line *: [: missing `]'

    错误: line *: [: missing `]' 写脚本时,我碰到这个问题是因为if [ ]; ...else...fi语句 解决方法: if后面的[] (test) 和条件要有空格,如: 对于语 ...

  8. [TPYBoard-Micropython之会python就能做硬件 4] 学习使用电位器和1602显示屏

    一.实验器材 1.TPYboard V102板  一块 2.电位器   一个 3.1602 屏 一块 4.杜邦线:若干 二.电位器的使用 电位器 (英文:Potentiometer)是可变电阻器的一种 ...

  9. delete和delete[]

    c++中对new申请的内存的释放方式有delete和delete[两种方式,到底这两者有什么区别呢? 1.我们通常从教科书上看到这样的说明:delete 释放new分配的单个对象指针指向的内存dele ...

  10. Code forces 719A Vitya in the Countryside

    A. Vitya in the Countryside time limit per test:1 second memory limit per test:256 megabytes input:s ...