ajax讲解：“创建用户”和“用户登录”练习

最新推荐文章于 2024-11-02 10:26:46 发布

weixin_30537391

最新推荐文章于 2024-11-02 10:26:46 发布

阅读量94

点赞数

文章标签： php 数据库 json

原文链接：http://www.cnblogs.com/zst062102/p/5499959.html

版权

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，结果如下

转载于:https://www.cnblogs.com/zst062102/p/5499959.html

weixin_30537391

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫