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. android提供ToolBar实现划动菜单的陷阱

    代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android: ...

  2. map和json之间的转换

    Action中在session中存放了一个map<String,Object>,跳转到a.jsp,a.jsp通过form提交到BAction,BAction可从session中获得map值 ...

  3. 其他常用HTML 片段

    1.input placeholder 文字居中 字体大小+上下padding值等于设计稿宽度 设计稿中总高度为86px   padding:27px 0;font-size:30px;   2.英文 ...

  4. PySe-005-基础环境配置（Win7）

    之前的文章讲述了如何在 MacOX 下配置 Python + Selenium2 的 WebUI测试自动化环境配置,敬请参阅 PySe-001-基础环境配置(MacOX). 此文主要讲述如何配置 Py ...

  5. Date and Time Pattern

    The following examples show how date and time patterns are interpreted in the U.S. locale. The given ...

  6. ｐｍｐ培训.rar

    pmp培训.rar http://pan.baidu.com/s/1sleUQol

  7. [BS-18] 对OC中不可变类的理解

    对OC中不可变类的理解 OC中存在很多不可变的类(如NSString,NSAttributedString,NSArray,NSDictionary,NSSet等),用它们创建的对象存在于堆内存中,但 ...

  8. 第四篇 SQL Server代理配置数据库邮件

    本篇文章是SQL Server代理系列的第四篇,详细内容请参考原文. 正如这一系列的前几篇所述,SQL Server代理作业是由一系列的作业步骤组成,每个步骤由一个独立的类型去执行.SQL Serve ...

  9. C#实现根据IP 查找真实地址

    IPScanner.cs public class IPScanner { private byte[] data; Regex regex = new Regex(@"(((\d{1,2} ...

  10. iOS 自定义UITabBarController的tabBar

               #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDeleg ...