最近在学习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就介绍到这里了