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. 怎么用sql语句查询一个数据库有多少张表

    今天在技术群中闲谈时忽然聊到一个问题,那就是当一个数据库中有多张表时怎么快速的获取到表的个数,从而给问询者一个准确的回答. 大家或许会说,这个问题和我们的数据库操作没有太大关系或者不是很挂钩,所以没意 ...

  2. magento 图片缓存是如何生成的

    Varien_Image_Adapter_Gd2 类 ,里面有个save()方法,通过图片格式拼出来的方法  call_user_func_array($this->_getCallback(' ...

  3. .net加载到vb 进程

    .net加载到vb 进程时,总是不能加载进去,什么原因呢? 要尝试三个步骤, 首先调试vb ,没有问题,代码能够调试 然后注册.net的dll,生成tlb文件,生成解决方案,调整附加到进程时的选项. ...

  4. shell 统计GMT0 时区的数据

    和某个供应商核对数据,对方是GMT+0时区,我方报表默认北京时间,无法修改为GMT0, 对excel中按照小时级别的数据导出到excel处理,然后转为文本文件,shell转为GMT0进行统计: 前期处 ...

  5. DOS - for

    遍历当前目录,显示文件/文件夹列表 for /f "usebackq" %i in (`dir /b`) do echo %i 注意点: 1.%i用于dos窗口,batch中需要使 ...

  6. [BS-02] iOS数组、字典、NSNumber 新写法—— @[]、@{}

    IOS数组.字典.NSNumber 新写法—— @[].@{}   //标准写法 NSNumber * number = [NSNumber numberWithInt:]; NSArray * ar ...

  7. Cache封装类

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...

  8. [ROS]2 尝试编译OrbSLAM

    主要参考http://blog.csdn.net/dourenyin/article/details/48055441 1.编译g2o的过程中, 先是出现Eigen3依赖项的问题,要求Eigen3最低 ...

  9. Git和SSH协议

    SSH(安全外壳协议)为Secure Shell的缩写,由IETF的网络工作小组(Network Working Group)所制定:SSH为建立在应用层和传输层基础上的安全协议.SSH是目前较可靠, ...

  10. PAT 解题报告 1048. Find Coins (25)

    1048. Find Coins (25) Eva loves to collect coins from all over the universe, including some other pl ...