ajax可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
 
接下来，将以例子的形式进行讲解
 
例一：创建用户
        在不刷新的情况下，当创建的用户已经有了，就会在后面显示：该用户名已经存在；
                                当创建的用户不存在，就会在后面显示：该用户名可以使用；
<body>

<div>

   创建用户名：<input type="text" id="uid"/>

                    <span id="xinxi"></span>

</div>

</body>

　　

调用ajax代码如下

<script type="text/javascript">

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

	$("#uid").blur(function(){  //blur失去焦点触发

		//把文本框里的内容取出来

		var uid=$(this).val()

		//调用ajax

		$.ajax({

			url:"chuli.php",  //处理页面

			data:{u:uid},     //传递数据，JSON数据形式，key：value 多个数据用逗号隔开

			type:"POST",      //提交方式

			datatype:"TEXT",  //返回的数据类型；TEXT：文本、字符串,JSON,XML

			success:function(data){   //回调函数  包括形参，和上面的date没关系

				    if(data=="OK")

					{

						var str="该用户名可以使用";

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

					}

					else

					{

						var str="<span style='color:red'>该用户名已经存在</span>";

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

					}

				},

			 //当调用失败，调用该方法，（不常用）

			 error: function(){}

			});

		})

　　当代码运行到红色字体的代码时，会运行chuli.php代码，如下

<?php

//接受传递过来的参数

$uid=$_POST["u"];

//查数据库

include("DBDA.class.php");

$db=new DBDA();

$sql="select count(*) from user where uid='{$uid}'";

$attr=$db->Query($sql);

if($attr[0][0]==1)  //当结果等于1，说明数据库已经存在该用户名。

{

	echo "NO";

}

else

{

    echo "OK";

}

　　

例二：用户登录

<body>

<h1>登陆</h1>

<div>

  用户名：<input type="text" id="uid"/>

</div>

<br />

<div>

  密  码：<input type="text" id="pwd"/>

</div>

<div>

             <input type="button" id="btn" value="登陆"/>

</div>

</body>

　　

ajax代码

<script type="text/javascript">

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

	$("#btn").click(function(){

		var uid=$("#uid").val();

		var pwd=$("#pwd").val();

		$.ajax({

			url:"dengluchuli.php",

			data:{u:uid,p:pwd},

			type:"POST",

			dataType:"TEXT",

			success: function(data)

			{

				if(data=="OK")

				{

					window.location="ajax.php";

				}

				else

				{

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

				}

			},

			});

		})

});

</script>

　　调用处理代码：dengluchuli.php

<?php

$uid=$_POST["u"];

$pwd=$_POST["p"];

include("DBDA.class.php");

$db=new DBDA();

$sql="select count(*) from user where uid='{$uid}' and pwd='{$pwd}'";

$attr=$db->Query($sql);

if($attr[0][0]==1)

{

	echo "OK";

}

else

{

	echo "NO";

}

　　

重点讲解：ajax的异步、同步讲解

在js中调用ajax时，有条async代码

async:false,     //false同步，true异步   不写的情况默认为true异步
     数据传输中
     同步：传输必须等到接受方接收到，才能传输下一个
     异步：传输不用等到对方接受就可以继续传输

AJAX同步false：AJAX必须等到处理完才能继续向下传输
   AJAX异步true(默认)：AJAX在处理数据的同时，代码继续往下执行

以下面的例题讲解

测试AJAX异步情况

<div id="text" style="width:100px; height:100px; background-color:#0FF"></div>

　　

$("#text").click(function(){

			//语句1

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

			//语句2

			$.ajax({

				//此处没有async，所以默认情况为async:true，异步

				url:"ajaxcl.php",

				//data:{},     //因为没有要传输的数据，所以不用写

				//type:"POST",

				datatype:"TEXT",

				success: function(data)

				{

				    //语句4

					$("#text").html(data);

				}

				});

			//语句3

			alert($("#sj").html());

　　要传入的处理页面是ajaxcl.php

<?php

echo "<div id='sj'>hello world!!</div>";

　　单击蓝色区域，会出现“语句3”的执行结果“undefined”，紧接着会在蓝色框内出现“语句4”的执行结果：hello world！！

因为语句2花费的时间要比语句3花费的时间长，所以要先显示语句3的执行结果：undefined；在然后显示语句4的执行结果，至此结束。

     为了解决这个问题，需要在ajax中加入async:false,同步；等到处理完语句4，在向后传输处理语句3，结果如下

ajax讲解：“创建用户”和“用户登录”练习的更多相关文章

  1. Mysql创建新用户后无法登录，提示 Access denied for user 'username'@'localhost' (using password: YES)

    MySQL创建新用户后无法登录,提示 Access denied for user 'username'@'localhost' (using password: YES) ,多半是因为存在匿名用户, ...

  2. 安装mysql5.7与创建用户和远程登录授权

    环境:ubuntu18.04 参考文章:安装并远程登录授权:https://www.cnblogs.com/chancy/p/9444187.html 用户管理:https://www.cnblogs ...

  3. Oracle12C用户创建、授权、登录

    Oracle12C用户创建.授权.登录 1.以系统用户登录 C:\Users\LEI>sqlplus sys/dwh as sysdba; SQL*Plus: Release 12.1.0.2. ...

  4. Linux下查看/管理当前登录用户及用户操作历史记录

    转载自: http://www.cnblogs.com/gaojun/archive/2013/10/24/3385885.html 一.查看及管理当前登录用户 1.使用w命令查看登录用户正在使用的进 ...

  5. MySQL, 创建一个只读用户和一个所有权限用户

    安装pasa需要配置mysql.基本知识学习一下 http://www.cnblogs.com/mr-wid/archive/2013/05/09/3068229.html MySQL 为关系型数据库 ...

  6. mysql新建用户本地无法登录

    mysql新建用户本地无法登录 MySQLDebianGoogleAccess  出此是用mysql,因为root权限过高,所以新建一用户appadmin,权限仅为要用到的数据库.创建语句如下:gra ...

  7. Mysql创建和删除用户

    问题描述:        Mysql中创建用户和删除用户 问题解决:     (1)查询Mysql当前登录账户     (2)创建用户     方法一: 创建用户赋予用户所有权限: 新创建的用户可以在 ...

  8. oracle创建表空间-用户-角色-授权

    1.创建数据表空间: SQL> create tablespace rusky_data datafile 'D:\rusky\rusky_data01,dbf' size 10M autoex ...

  9. 给postgresql 创建新的用户

    \du 查看当前postgresql的用户,一般此时只能看到 postgres create user ysr superuser password '123456'; \du 就可以看到两个用户了. ...

  10. SQLServer创建用户自定义数据库用户

    创建用户自定义数据库用户注意事项 如果已忽略 FOR LOGIN,则新的数据库用户将被映射到同名的SQL Server登录名. 默认架构将是服务器为此数据库用户解析对象名时将搜索的第一个架构. 除非另 ...

随机推荐

  1. VS2015 多项目源码共享链接

    Eclipse有这个功能,在一个项目中加入另一个项目文件夹的引用,源码包含过来,这样不必copy一份代码,只需要维护一份源代码.一直想在VS中找到这个功能,目前项目需要,终于google到了. htt ...

  2. Cocos2d-JS工程中的文件结构

    res文件夹存放资源文件 src文件夹是主要的程序代码 app.js是实现游戏场景的JavaScript文件 resource.js在src文件夹中,定义资源对应的变量 config.json保存模拟 ...

  3. [LeetCode] Longest Palindromic Substring（manacher algorithm）

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  4. [LeetCode]题解（python）：035-Search Insert Position

    题目来源 https://leetcode.com/problems/search-insert-position/ Given a sorted array and a target value, ...

  5. ACCESS自动编号重新从1开始

    方法一:  删掉自动编号的字段,再建一个同样的自动编号字段. 方法二:  选择工具,再选择数据库实用工具,单击压缩和修复数据库,这样就OK了. 方法三:(提示错误“无效的数据字段类型” 尝试失败)  ...

  6. 【转】ViewPager实现一个页面多个Item的显示

    转自:http://billyyuan.iteye.com/blog/1941538 ViewPager实现一个页面多个Item的显示 博客分类: android   代码在: https://cod ...

  7. angularJs：双向数据绑定

    示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...

  8. ubuntu 12.04安装jdk1.8

    转自http://blog.chinaunix.net/uid-26404477-id-3471246.html 在安装之前,系统没有任何jdk软件,也就是说在终端执行 java -version 将 ...

  9. LeetCode Flip Game II

    原题链接在这里:https://leetcode.com/problems/flip-game-ii/ 题目: You are playing the following Flip Game with ...

  10. php实现斐波那契数列以及由此引起的联想

    斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一 ...