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. ecshop前台英文后台中文

    方法一:修改init.php文件方法改变ecshop默认语言包 该方法适用于:安装ecshop中文版的站长使用. 1.进入您的后台,按照下图提示,将系统语言选项设为 en_us(英语) ,确定保存. ...

  2. eclipse中hibernate逆向工程出错

    问题已解决!原因是Console configuration的信息编辑有误. 上图中Database connection,如果有已编辑好的可用连接信息就选择,没有的情况下就new一个 如果没有Dri ...

  3. qt QString 与 int,char的转换

    每次QString转换int或者char的时候都要查资料,记录一下,方便下次查看. 参考: http://blog.csdn.net/ei__nino/article/details/7297791 ...

  4. 追加文件内容java

    1.向空文件文件中追加内容(如果原来有内容,则覆盖) FileWriter writer; try { writer = new FileWriter(listFile);//创建字符输出流类对象和已 ...

  5. centos linux安全和调优 第四十一节课

    centos  linux安全和调优    第四十一节课 上半节课 Linux安全 下半节课 Linux调优 2015-07-01linux安全和调优 [复制链接]--http://www.apele ...

  6. SQLServer找出执行慢的SQL语句

      SELECT (total_elapsed_time / execution_count)/1000 N'平均时间ms' ,total_elapsed_time/1000 N'总花费时间ms' , ...

  7. Redis 安全性设置

    redis安装好后,默认情况下登陆客户端和使用命令操作时不需要密码的.某些情况下,为了安全起见,我们可以设置在客户端连接后进行任何操作之前都要进行密码验证. 我这边是安装的window系统,修改red ...

  8. IE、chrome、火狐中如何调试javascript脚本

    1.  IE中点击"F12",在弹出页面中调试javascript脚本 2. chrome中点击"F12",在弹出页面中调试javascript脚本 3.  火 ...

  9. django url 软编码

    期初用django 开发应用的时候,完全是在urls.py 中硬编码配置地址,在views.py中HttpResponseRedirect()也是硬编码转向地址,当然在template 中也是一样了, ...

  10. 1.Spring Web MVC有什么

    Spring Web MVC使用了MVC架构模式的思想,将web层进行职责解耦. 同样也是基于请求驱动的,也就是使用请求-响应模型.它主要包含如下组件: DispatcherServlet :前端控制 ...