ajax实现及时刷新

最新推荐文章于 2021-10-26 08:36:42 发布
最新推荐文章于 2021-10-26 08:36:42 发布
阅读量906 收藏
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36465347/article/details/72356494
版权

最近在学习AJAX，做了一个小案例

通过匹配数据库中的数据，及时验证账号能否注册

通过上面的登陆按钮，可以立即将数据加入数据库

下边的表格是实时读取数据库数据的展示，并实现了删除功能，实时操作数据库

以上是大致功能的介绍，都是通过ajax进行局部刷新后的展示，下面大概介绍一下实现方法


准备工作是搭建一个服务器，我用的是WAM，在数据库test中建一张表users，后面

新建一个add-del.php页面作为主页，些一些简单的布局，显示相关信息；

然后在页面head处插入一段php，读取数据库中的数据保存到$tables这个数组中

<?php
			header('Content-type:text/html','charset=utf-8');
			//连接数据库
			$mysqli=new mysqli();
			$mysqli->connect('localhost','root','','test');
			if(mysqli_connect_error()){
				echo '数据库连接错误';
			}else{
				echo '数据库连接成功';
			}
			$sql='select * from users';
			$res=$mysqli->query($sql);
			$tables=array();
			//以关联数组形式读取每一行
			while($row=$res->fetch_assoc()){
				$tables[]=$row;//遍历每一行
			}
		?>
拿到数据后，在下面table内再嵌入php代码，通过遍历数组中的数据，将数据展示出来 

<?php
				foreach($tables as $row){
					echo "<tr id={$row['id']} align='center' bgcolor='white'>";
					echo "<td>{$row['id']}</td>";
					echo "<td>{$row['name']}</td>";
					echo "<td>{$row['pwd']}</td>";
					echo "<td ><a href='javascript:' class='dele' num={$row['id']}>删除</a></td>";
					echo "</tr>";
				}
			?>
界面差不多做好了，能够直接拿到数据库中的数据，下面就是实现相关的功能，由于嵌入了一些jQuery代码，所以先引入jQuery库 

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
首先要实现的是判断用户名是否重复，通过一个函数来实现，函数中实现了ajax功能 

function panduan($span,zhanghao){
	xhrpan=new XMLHttpRequest();
	xhrpan.open('GET','pan.php?zhanghao='+zhanghao);
	xhrpan.send();
	xhrpan.onreadystatechange=function(){
		if(xhrpan.readyState===4){
			restxt=xhrpan.responseText;
				if(restxt=='000'){
					$span.text('*该账号已经被注册').css('color','red');
				}else{
					$span.text('*该账号可以注册').css('color','green')
				}
		}
	}
}
然后将请求交给一个php页面，所以新建一个pan.php，实现相关的数据库查询，并返回结果 

<?php   
header('Content-type:text/html;charset=utf-8');

$zhanghao=$_GET['zhanghao'];
$mysqli=new mysqli();
$mysqli->connect('localhost','root','','test');
if(mysqli_connect_error()){
	echo '数据库连接失败：'.mysqli_connect_error();
}else{
	$sql="select * from users where name='$zhanghao'";
	$res=$mysqli->query($sql);
	if($res){
		$result=mysqli_num_rows($res);
		if($result>0){
		echo '000';//如果有重复
		}else{
		echo '111';//如果没有重复
		}
	}
}
?>
最后在主页面中调用，触发条件是当失去焦点时 

$('#zhanghao').blur(function(){
				var zhanghao=$('#zhanghao').val();
				if(zhanghao!=''){
					var res=panduan($('span'),zhanghao);
				}
			})
上面便实现了账号实时匹配的功能，接下来插入数据，并局部刷新

同样，写一个具有AJAX功能的函数

function addate(arr_data,domrow,len){
	var zhanghao=arr_data[0];
	var mima=arr_data[1];
	xhr=new XMLHttpRequest();
	xhr.open('POST','add.php');
	xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
	xhr.send('zhanghao='+zhanghao+'&mima='+mima);
	xhr.onreadystatechange=function(){
		if(xhr.readyState===4){
			var res=xhr.responseText;
			var result=JSON.parse(res);
			
			var addrow=domrow.insertRow(len+1);
			addrow.align='center';
			var iid=addrow.insertCell(0);
			var izhanghao=addrow.insertCell(1);
			var imima=addrow.insertCell(2);
			var idel=addrow.insertCell(3);
			
			iid.innerHTML=result.id;
			izhanghao.innerHTML=result.zhanghao;
			imima.innerHTML=result.mima;
			idel.innerHTML="<a href='javascript:' class='del' num='result.id'>删除</a>";
			
			$(idel).click(function(){
				deldate(addrow,result.id)
			})
		}
	}
}
创建一个响应的PHP页面 add.php 

<?php
	header('Content-type:text/html;charset=utf-8');
	$zhanghao=$_POST['zhanghao'];
	$mima=$_POST['mima'];
	$data=array();
	
	if($zhanghao!=null&&$mima!=null){
		$mysqli=new mysqli();
		$mysqli->connect('localhost','root','','test');
		
		if(mysqli_connect_error()){
			echo '连接数据库失败';
		}else{
			$sql="INSERT INTO users(name,pwd,bei) VALUES('$zhanghao','$mima','sss')";
			$res=$mysqli->query($sql);
			if($res){
				$data['id']=$mysqli->insert_id;
				$data['zhanghao']=$zhanghao;
				$data['mima']=$mima;
				$result=json_encode($data);
				echo $result;
			}
		}
	}
?>
然后主页面调用，出发条件是点击按钮 

$('#denglu').click(function(){
			var len=$('.dele').length;
			var tab=document.getElementById('tab');
			var zhanghao=$('#zhanghao').val();
			var mima=$('#mima').val();
			var mval=new Array();
			mval[0]=zhanghao;
			mval[1]=mima;
			addate(mval,tab,len);
			})
以上，添加内容做好了，下面是实现删除功能，点击末尾的删除，变将改行的数据删掉，同时删除数据库中对应的数据

删除功能需要分两钟，一种是从数据库中读取出来的数据，初始化时就已经做好了标记，另外一种是刚刚才添加的数据，对每个DOM对象设置删除监听，

但毕竟都是删除方法，所以针对于数据响应页面的操作都是一样的，同样放到一个函数中

function deldate(tdom,num){
	xhrdel=new XMLHttpRequest();
	xhrdel.open('POST','del.php');
	xhrdel.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	xhrdel.send('num='+num);
	
	xhrdel.onreadystatechange=function(){
		if(xhrdel.readyState===4){
			if(xhrdel.responseText==1){
				$(tdom).empty();
			}else{
				alert('数据库操作失败')
			}
		}
	}
}
同样创建响应页面del.php 

<?php
	header("Content-type:text/html;charset=utf-8");
	$mysqli=new mysqli();
	$mysqli->connect('localhost','root','','test');
	if(mysqli_connect_error()){
		echo '数据库连接失败:'.mysqli_connect_error();
		exit();
	}else{
		$id=$_POST['num'];
	
	$sql="delete from users where id=$id";
		$res=$mysqli->query($sql);
		if($res){
		echo 1;
		}else{
		echo 0;
		}
	}
	$mysqli->close();

?>
然后分两种创建响应，首先主页面中，直接创建点击响应 

$('.dele').click(function(){
				var num=$(this).attr('num');
				var tdom=document.getElementById(num);
				deldate(tdom,num);
			})
第二种响应是在addate函数中为当前的DOM对象添加监听响应事件，直接调用deldate方法 

$(idel).click(function(){
				deldate(addrow,result.id)
			})
以上便实现了相关的方能，最后贴上完整的代码

主页面add-del.php

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ajax巩固</title>
		<style>
			body{
				width: 100%;
				text-align: center;
			}
			
			#tabshow{
				width: 100%;
			}
			#tab{
				width: 500px;
				margin: 0 auto;
			}
			
			#title{
				font-size: 35px;
				color: blueviolet;
			}
		</style>
		<script src="jquery-2.1.0.js"></script>
		<!--<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>-->
		<script type="text/javascript" src="tableshow.js"></script>
		<?php
			header('Content-type:text/html','charset=utf-8');
			//连接数据库
			$mysqli=new mysqli();
			$mysqli->connect('localhost','root','','test');
			if(mysqli_connect_error()){
				echo '数据库连接错误';
			}else{
				echo '数据库连接成功';
			}
			$sql='select * from users';
			$res=$mysqli->query($sql);
			$tables=array();
			//以关联数组形式读取每一行
			while($row=$res->fetch_assoc()){
				$tables[]=$row;//遍历每一行
			}
		?>
	</head>
	<body>
		<br>
		<br>
		<label id="title">请填写登陆信息</label>
		<br>
		<br>
		<label>输入账号</label>
		<input id="zhanghao" placeholder="手机号/邮箱"/>
		<span></span>
		<br>
		<br />
		<label>输入密码</label>
		<input type="text" id="mima" placeholder="请输入密码"/>
		<br />
		<br />
		<input type="button" value="登陆" id="denglu"/>
		<br />
		<br />
		
		<div id='tabshow'>
			<table id="tab">
			<tr bgcolor="mediumturquoise">
			<th>ID</th>
			<th>账号</th>
			<th>密码</th>
			<th></th>
			</tr>
			
			<?php
				foreach($tables as $row){
					echo "<tr id={$row['id']} align='center' bgcolor='white'>";
					echo "<td>{$row['id']}</td>";
					echo "<td>{$row['name']}</td>";
					echo "<td>{$row['pwd']}</td>";
					echo "<td ><a href='javascript:' class='dele' num={$row['id']}>删除</a></td>";
					echo "</tr>";
				}
			?>
		</table>
		</div>
		
		<script>
			$('#zhanghao').blur(function(){
				var zhanghao=$('#zhanghao').val();
				if(zhanghao!=''){
					var res=panduan($('span'),zhanghao);
				}
			})
			
			
			$('#denglu').click(function(){
			var len=$('.dele').length;
			var tab=document.getElementById('tab');
			var zhanghao=$('#zhanghao').val();
			var mima=$('#mima').val();
			var mval=new Array();
			mval[0]=zhanghao;
			mval[1]=mima;
			addate(mval,tab,len);
			})
			
			$('.dele').click(function(){
				var num=$(this).attr('num');
				var tdom=document.getElementById(num);
				deldate(tdom,num);
			})
 	</script>
	</body>
</html>
tableshow.js用于存放相关功能的函数 

function addate(arr_data,domrow,len){
	var zhanghao=arr_data[0];
	var mima=arr_data[1];
	xhr=new XMLHttpRequest();
	xhr.open('POST','add.php');
	xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
	xhr.send('zhanghao='+zhanghao+'&mima='+mima);
	xhr.onreadystatechange=function(){
		if(xhr.readyState===4){
			var res=xhr.responseText;
			var result=JSON.parse(res);
			
			var addrow=domrow.insertRow(len+1);
			addrow.align='center';
			var iid=addrow.insertCell(0);
			var izhanghao=addrow.insertCell(1);
			var imima=addrow.insertCell(2);
			var idel=addrow.insertCell(3);
			
			iid.innerHTML=result.id;
			izhanghao.innerHTML=result.zhanghao;
			imima.innerHTML=result.mima;
			idel.innerHTML="<a href='javascript:' class='del' num='result.id'>删除</a>";
			
			$(idel).click(function(){
				deldate(addrow,result.id)
			})
		}
	}
}

function deldate(tdom,num){
	xhrdel=new XMLHttpRequest();
	xhrdel.open('POST','del.php');
	xhrdel.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	xhrdel.send('num='+num);
	
	xhrdel.onreadystatechange=function(){
		if(xhrdel.readyState===4){
			if(xhrdel.responseText==1){
				$(tdom).empty();
			}else{
				alert('数据库操作失败')
			}
		}
	}
}

function panduan($span,zhanghao){
	xhrpan=new XMLHttpRequest();
	xhrpan.open('GET','pan.php?zhanghao='+zhanghao);
	xhrpan.send();
	xhrpan.onreadystatechange=function(){
		if(xhrpan.readyState===4){
			restxt=xhrpan.responseText;
				if(restxt=='000'){
					$span.text('*该账号已经被注册').css('color','red');
				}else{
					$span.text('*该账号可以注册').css('color','green')
				}
		}
	}
}
另外三个php文件，add.php，pan.php，del.php均在上面粘贴出来了，这个小Demo就介绍到这里了
























界域
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax右侧刷新加载jsp,jsp实现局部刷新页面、异步加载页面的方法
weixin_32172693的博客
08-05 1602
jsp实现局部刷新页面、异步加载页面的方法局部刷新页面、异步加载页面方案：1.在jsp页面需要刷新的地方增加一个控件2.新建一个jsp页面：aaa.jsp(用来放置需要刷新的内容)3.将id为courseList的dom标签重新赋值为需要的页面，就能达到局部刷新的目的$('#courseList').html(msg);例如：$.ajax({dataType:"text",url:basePath...
如何用ajax实现页面自动刷新,Ajax实现页面自动刷新实例解析
weixin_42503223的博客
08-06 1629
Ajax实现页面自动刷新实例解析 内容精选换一换用户已创建桶并上传了网站文件。域名后缀目前支持的范围为2~6个英文大小写字母。开启CDN加速后，可配置网站加速、文件下载加速和点播加速。详细应用场景请参见应用场景。通过CDN实现OBS文件下载加速的详细配置方法请参见最佳实践。CDN加速需收费，具体请参见CDN价格说明。同时OBS提供更加优惠的回源流量包，可以减少CDN加速场景下获取数据时云解析服务支...
[WEB] 详解Ajax实现网页数据异步更新并实时自动刷新
热门推荐
...
09-04 1万+
本周在做STC大作业的时候，采集了开发板上的光照和温度数据传到了腾讯云服务器上（实现可以参考我的另外一篇文章 ： socket实现服务器和客户端双向通信），由于开发板采集的数据是时实更新的，故网页的数据也需要实时更新，故学习并记录Ajax数据更新方法，当然还需要结合之前做H5游戏开发多子弹线程的经验，使用setInterval() 方法实现函数的循环定时回调，以实现数据不断刷新的效果 Aja...
Ajax实现页面自动刷新实例解析
你要明白，任何问题都不是孤立存在的，一定有人曾经遇到过，并且已经有更好的解决办法了，只是我还不知道。我不应该在黑暗中独自前行，去重新发明轮子，也许我的顿悟，只是别人的基本功！我应该要站在巨人的肩膀上，学习更成熟的经验和方法，然后再来解决这个问题
11-04 700
https://www.jb51.net/article/83169.htm 1.我们在网上搜搜会发现有很多定时刷新页面的方法，最简单的就是在<head></head>标记之间加上如下代码： 在<head></head>标记之间加上代码，实现定时刷新，此代码我已经测试过，可以实现效果 <meta http-equiv="refresh" ...
ajax实现消息实时刷新
w_t_y_y的博客
05-03 1万+
现往这个数据表里面插入数据，要求不点击刷新按钮实时显示在浏览器中，这就需要用到ajax。 第一步，编写js文件AjaxRequest.js： var net = new Object(); // 定义一个全局变量net // 编写构造函数 net.AjaxRequest = function(url, onload, onerror, method, params) { th
jquery实现Ajax定时局部页面刷新
01-16
能够实现页面局部刷新，及时掌握最新消息，例如小型的聊天功能
AJAX DWR框架实现部分刷新效果
10-20
AJAX通过在后台与服务器进行异步通信，实现了页面的局部刷新。 DWR（Direct Web Remoting）是一个开源Java框架，它简化了AJAX在Java应用程序中的应用。DWR使得JavaScript和Java之间可以直接通信，就像它们是同一...
Ajax不刷屏实现刷新.txt
10-12
Ajax不刷屏实现刷新的一个方法。 能够定时刷新页面，但不会有画面闪动的感觉。
ajax及时上传附带进度条 ajax定时
06-07
而Ajax实现实时上传，可以显著改善这一问题。通过创建XMLHttpRequest对象，我们可以在后台与服务器进行通信，用户在上传文件的同时可以继续浏览其他页面内容。具体实现中，前端通常会有一个文件选择组件，用户选择...
用Jquery里面封装的Ajax方法实现无页面刷新效果
03-26
在描述中提到的“秒杀Ajax效果”，可能是指在高并发环境下，使用 AJAX 实现快速响应和数据处理，比如在商品秒杀活动时，及时更新库存状态或显示抢购结果。这种情况下，通常需要考虑服务器端的负载平衡、数据一致性...
Ajax实现定时刷新，获取后台数据实现技术
04-29
Ajax实现定时刷新，获取后台数据实现技术
js-ajax数据刷新
11-19
在html5中，通过js实现原生ajax，通过定时器实现数据刷新
在flask中用ajax实现页面实时更新（轮询）功能——以课表实时更新为例
numb_ac的博客
10-26 4563
一、用ajax实现将时间传入HTML界面（用按钮查询） 1. 下载jquery，将其放在static里面 下载地址 2. 写HTML页面，放到template里面，并写对应的视图函数 HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮询</title> </head> <body> <
jquery使用ajax实现实时刷新
wchqzhy99的专栏
01-21 581
对于前端渲染页面拿数据，无非就是ajax、socket，其他的暂时没有用过，但项目还是使用ajax比较多。 简单的基于ajax短轮询的请求： function reqs() { $.ajax({ type: 'get', url: 'demo.php', dataType: 'json', success: functi...
Ajax 实现局部刷新、无刷新
StrongBoy
12-28 1513
page1.aspx前台代码： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" >     无标题页           var xmlHttp;       var xml_post_get;             function Cre
Ajax无刷新实现定时更新数据
也许有错 专栏
06-05 2247
1、引用 ajax.dll 实现走动时间显示来查看效果前台代码          //定时更新时间          function refresh()          {               var div = document.all("divTime");                              var strTime = Default1.GetAllOn
ajax实时刷新
ice_load的博客
08-08 691
//实时刷新页面数据，每隔一段时间一刷新，期间如果有新增订单的话，在右下角弹出提示框【“有一笔新的订单！请注意查看”】$(document).ready( function(){ var int=self.setInterval("query_newXyxOrder()",1000); var int1=self.setI
基于AJAX技术的syslog信息实时呈现.docx
最新发布
10-13
传统的Web应用通常依赖于页面重载来处理用户输入，而AJAX则打破了这一模式，实现了局部刷新。当用户在基于AJAX的syslog系统中触发事件，如查看特定时间段的syslog记录，XMLHttpRequest会异步发送请求到服务器，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值