php jquery ajax增加 删除 修改,Ajax添加数据与删除篇实现代码

如果你真的把前几篇掌握了.实现ajax删除功能会易如反常.我所要教你的是.灵活利用JavaScript和Dom来实现一个酷酷的删除效果.其实你学习到这里.已经能够明白,在ajax技术中那些被请求的 服务端网页,在非ajax应用中并无太大区别.无非也是接受前端发过来的请求.在后台执行一些操作而已!学习完这篇教程以后.你会明白想要实现够炫够酷的的ajax效果.你必须要熟练掌握JavaScript Dom 这些技术精通.

刚刚我喝多了,上面的这段话是我在两天前就写好的.我本来想直接睡觉的.但我想试试.是不是在我喝酒之后,我能够讲的更好.

其实我觉得在我酒醉迷离的时候更能很好的将我的知识传授与你.今天的添加效果与前一篇的添加数据一样.但今天的删除效果或许是你从未看到过的.想要删除那条数据.请单击他.然后点击删除按扭.这跟桌面应用程序并无二样.ajax就是这样的神奇.不然 他不会被全世界的Web开发人员所追求!还是先看实例吧.你会为此而感到惊讶的!

ajax无刷新添加与删除数据

body{

font-size:12px;

}

table{

border-collapse:collapse;

}

为显示更流畅,我们只读取数据库内最新的10条数据.由于在线测试人数多.都在操作一个数据库.可能会出现并发情况!


输入内容:

操作提示:请用鼠标单击你想要删除的数据.然后点击删除按扭!

function ajax_xmlhttp(){

//在IE中创建xmlhttpRequest,适用于IE5.0以上所有版本

var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");

for(var i=0; i

try

{

_xmlhttp=new ActiveXObject(msXmlhttp[i]);

}

catch(e)

{

_xmlhttp=null;

}

} //循环创建基于IE浏览器的xmlhttp.结束

//如果非IE浏览器,则创建基于FireFox等浏览器的xmlhttpRequest

if(!_xmlhttp && typeof XMLHttpRequest != "undefined")

{

_xmlhttp=new XMLHttpRequest();

}

return _xmlhttp;

}

//读取数据函数

function Read(){

var ajax = ajax_xmlhttp(); //将xmlhttprequest对象赋值给一个变量.

ajax.open("post","Add_Del_Data.asp?action=read",true);//设置请求方式,请求的网页,url的action参数为read,异步请求

ajax.onreadystatechange = function(){//你也可以这里指定一个已经写好的函数名称

if(ajax.readyState == 4){//数据返回成功

if(ajax.status == 200){//http请求状态码返回ok

var xmlData = ajax.responseXML;//以xml格式接收返回的数据,并保存在xmlData变量里

var list = xmlData.getElementsByTagName("list");//在返回的数据里,获取所有list标签

if(list.length!=0){

var t = document.getElementById("a");//获取展示数据的表格

while(t.rows.length!=0){ //在读取数据时如果表格已存行.一律删除

t.removeChild(t.rows[0]);

}

for(var i=0;i

var tr = t.insertRow(t.rows.length);//有几个list就为表格增加几行.

tr.setAttribute("id",list[i].childNodes[0].firstChild.nodeValue);

tr.onclick = function(e){add_Event(e)};

var td = tr.insertCell(0);

td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;

}

}

}

}

}

ajax.send(null);//提交请求,参数为null

}

window.load = Read();

function add_Event(e){

e = e || window.event;

var elem = e.target || e.srcElement;

if(elem.tagName == "TD"){

elem = elem.parentNode;

}

var table = elem.parentNode;

for(var i=0;i

table.rows[i].style.background="";

}

elem.style.background="#999ccc";

document.getElementById("hid_id").value = elem.id;

}

//删除数据函数

function del_Data(){

var mesage = document.getElementById("msg");//获取显示操作信息的span

mesage.innerHTML="正在删除请稍候......";

var table = document.getElementById("a");//获取要显示数据的表格

if(table.rows.length == 0){

mesage.innerHTML = "表格内没有数据可供删除!";

return;

}

var id = document.getElementById("hid_id");

if(id.value.length == 0){

mesage.innerHTML = "您还没有选择数据!";

return;

}

var ajax = ajax_xmlhttp();//定义xmlhttprequest对象

ajax.open("post","Add_Del_data.asp?action=del",true);//设置请求方式,请求文件,异步请求

var param = "id="+escape(id.value);//获取要删除数据的id

ajax.onreadystatechange = function(){

if(ajax.readyState==4){

if(ajax.status==200){

var xml = ajax.responseXML;

var msg = xml.getElementsByTagName("msg")[0].firstChild.nodeValue;

if(msg == 0){

mesage.innerHTML = "成功删除数据!";

var tr = document.getElementById(id.value);//获取当前选择的行

tr.parentNode.removeChild(tr);//引用该行的父元素.然后删除该行.

id.value="";//删除完成清空文本框里的值,

}

if(msg == 1){

mesage.innerHTML = "服务端发生错误,删除失败!";

}

}

}

}

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

ajax.send(param);

}

//提交数据函数

function add_Post(){

var msgaes = document.getElementById("msg");//用来显示提示信息

var str = document.getElementById("str");//接收输入的内容

if(str.value.length == 0){

msgaes.innerHTML = "不接受空内容!"

return;

}

msgaes.innerHTML = "正在提交";

var ajax = ajax_xmlhttp();//定义xmlhttprequest对象

ajax.open("post","Add_Del_data.asp?action=add",true);//设置请求方式,请求文件,异步请求

var param = "str="+escape(str.value);//获取你输入的内容,注意这里的str,服务端将接收str中的值

ajax.onreadystatechange = function(){

if(ajax.readyState==4){

if(ajax.status==200){

var msg = ajax.responseXML.getElementsByTagName("msg");//获取服务端返回的msg标签

if(msg[0].firstChild.nodeValue == 0){

var max_num = ajax.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;

var t = document.getElementById("a");

var tr = t.insertRow(0);

tr.setAttribute("id",max_num);

tr.onclick = function(e){add_Event(e)};

var td = tr.insertCell(0);

td.innerHTML = str.value;

str.value = "";

msgaes.innerHTML = "添加完成";

}

else if(msg[0].firstChild.nodeValue == 3){

msgaes.innerHTML = "不接受空的内容";

return;

}

else if(msg[0].firstChild.nodeValue == 1){

msgaes.innerHTML = "服务端发生错误,数据添加失败!";

return;

}

else{

msgaes.innerHTML = "该实例供学习使用.请不要恶意输入.谢谢!";

}

}

}

}

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//注意向服务端提交数据,必须设置该头.否则服务端会接收不到

ajax.send(param);//注意send方法向服务端提交param变量中的内容.

}

脚本之家+

怎么样效果是不是很酷?上面的文本框里是前台的html源码.我们先来讲一下我们在前端干了什么.从body标签开始讲起.

一段友情提示的文字.告诉你会出现些什么情况!

添加数据的文本框和按扭!用来向服务端数据库写入数据内容.

一个span标签.ID为msg,用来显示你当前操作的信息

一个表格.表格内有tbody元素,id为a.用来显示读取到的数据.你可以在表格内选择要删除的数据.

一个隐藏的输入框.当你选择数据时.会把该数据的id值放到输入框里.删除时引用这个值.提交给服务端

删除数据按扭.定义了一个onclick单击事件.del_Data()函数.向服务发送删除指令

下面进入script脚本部份.script里面有5个自定义函数.分别是:ajax_xmlhttp(),Read(),add_Event(),del_Data(),add_Post().我们来一一讲解函数的作用.

1、ajax_xmlhttp();创建一个可用的XMLHTTPRequest对象,如果你还不知道什么是XMLHTTPRequest,请参阅:XMLHTTPRequest

2、Read();读取数据函数.前几篇教程中都有讲过ajax读取数据.我只讲今天读取过程中的重点,先看下服务端网页输出的xml.add_del_data.asp?action=read.从服务端传回的xml数据里获取所有的list标签以后.我们先使用getElementById方法获取到了存放数据的表格.然后循环遍历这些list 标签.每个list代表一条数据.每个list内包含着2个子元素.第1个子元素内存储着该条数据的id值,第2个子元素内存储着该条数据的文本内容.好,我们来看下Read()函数中for循环里的语句:

(1):var tr = t.insertRow(t.rows.length);每循环一个list便为表格增加一行.因为表格的每一行显示一条数据.并返回对该行的引用.

(2):tr.setAttribute("id",list[i].childNodes[0].firstChild.nodeValue);为新增的行设置一个id属性.并为该属性指定一个值.注意,这里是重点.list[i].childNodes[0].firstChild.nodeValue这句的意思是要获取每条数据中id字段的值.也就是该条数据的id值.我们将这个值写给tr的id属性.以方便我们用鼠标点击了某行以后来引用这个id.

(3):tr.οnclick=function(e){add_Event(e)};紧接着再为新增的行绑定一个自定义函数.函数的名称是add_Event();

(4):var td.tr.insertCell(0);为新的增添加一列.并返回对该列的引用.

(5):td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;在该列中写入第i个list的第2个子元素中的文本内容.也就是content字段里的内容了

我们把每条数据的id设定给表格中每一行的id属性.把每条数据中的content中的文本内容填写到每一行中的单元格内.至此整个数据的显示过程已完成!

3、add_Event(e);我们在Read函数内向表格的每一行绑定了该函数.并利用闭包技术向addEvent传递了事件对象.该函数的作用就是找出你单击的行.并获得该行数据的id:

(1):e = e || window.event;标准化事件对象.FF等浏览器利用参数传递,IE可直接使用window.event.

(2):var elem = e.target || e.srcElement; 请参阅:target或srcElement.标准化触发事件的元素.是那个元素触发了该事件.在这里的意思是说:你点击了表格中的那一行.但事实上我取到的是TD,而并非TR.这应该是传说中的事件捕获和冒泡所致.没关系我们使用tagName判断一下 如果是TD,则取该TD的父元素.这下肯定是TR了吧.呵呵.

(3):var table = elem.parentNode;取TR的父元素.就是那个tbody.并返回对tbody的引用.

(4):使用一个for循环遍历tbody中所有的行.将每行的背景颜色设置为空.

(5):elem.style.background="#999000";循环完毕以后.为你点击的这一行添加一个背景色.

(6):document.getElementById("hid_id").value = elem.id;获取网页中那个隐藏的文本框.并将你点击的这一行的id写入到文本框内.该行的id属性值.正是你选取数据的id值.而且每点击一行.这个文本框里的值都会随着你点击的行而改变.而我们在提交删除的函数里正是引用的该文本框里的值.

4、del_Data();该函数的作用:把被删除的数据的ID提交给服务端请求的网页.然后根据服务端返回的一个msg标签.来判断数据是否被成功删除.老规矩我只讲以前没有涉及过的内容:

(1):点击删除按扭启用del_Data()函数.我们先找出id为msg的span标签.然后写一段操作信息.告诉你正在删除数据.

(2):获取要存放数据的表格.也就是那个id为a的tbody.判断tbody中是否有数据.如果tbody中没有任何数据.则告诉你没有数据可供选择.然后退出函数.不再往下执行.

(3):获取那个隐藏的文本框.并判断文本框是否有值.如果为空显示一段提示信息.退出函数.不再执行!如果有值存在则证明你选择了某条数据.下面的ajax会将你选择的这条数据提交给服务端网页进行删除

(4):关于ajax是如何提交和回收数据的.请参阅"ajax初试之读取数据篇"与"ajax读取数到表格".

(5):del_Data()重点是这里:判断服务端传回那个msg标签.如果该标签的内容为0,则代表服务端工作一切顺利,数据已被成功删除.

(6):数据被成功删除以后:var tr = document.getElementById(id.value);获取当前选择的行.

(7):tr.parentNode.removeChild(tr);//引用该行的父元素tbody,删除该行!

至此删除数据完成.其经过是接受服务端发回来的信号.如果删除成功,则删除前端选择的表格行.如果失败则给出提示信息!

5、add_Post();该函数与上一篇中基本一样.提交添加的数据给服务端.唯一不同的地方是:当数据被成功添加以后.我们又调用了Read();函数来读取新的数据.因为我们必须要获得新添加数据的正确id,以便我们可以正确删除!

好了,前端的代码已经讲解完了.

下面是本次ajax实例教程请求的服务端网页源码:

'出自:http://Www.Web666.Net

'作者:康董

'如需转载请务必保留以上信息

'定义一个变量,来保存xml数据

xml="<?xml version='1.0' encoding='gb2312'?>

"

action=Request.QueryString("action") '使用get方式接受一个action来判断客户端想要执行什么操作

Select case action

case "read" '如果为read则执行读取数据的操作

Call Read

case "add" '如果为add则执行添加数据

Call Add_Data

case "del" '如果为del则执行删除数据的操作

Call Del_Data

case else

xml = xml&"请求参数错误,请不要试图非法操作!"

End Select

xml=xml&""

Response.Clear

Response.ContentType="text/xml"

Response.CharSet="gb2312"

Response.write xml

Response.End

Sub Read '定义一个读取数据的过程

Call OpenConn '打开数据库链接

Sql = "Select top 10 * From del_table order by id desc" '打开数据库中名字为del_table的表

Set Rs = Conn.Execute(Sql) '执行Sql语句,并将sql的索引赋值给rs变量

While Not Rs.Eof '如果表中有数据.则一直循环读取

xml = xml&"" '每读取一条数据则创建一个list标签

xml = xml&""&Rs("id")&"" 'id字段内容

xml = xml&""&Rs("content")&"" 'content字段内容

xml = xml&"" '每读完一条数据,就闭合list标签

Rs.MoveNext '执行下一条数据的读取

Wend '如果数据库中没有了数据.则结束循环

Close_Conn '关闭数据库链接

End Sub

Sub Add_Data '添加数据过程

On Error Resume Next '如果发生错误继续执行程序

OpenConn '打开数据库链接

str = Trim(Request.Form("str")) '接收客户端传过来的str内容

If str = "" Then

xml = xml&"3" '如果提交的内容为空.返回3

Exit Sub '退出过程

End If

Sql = "Insert Into del_table (content) values ('"&str&"')"

Conn.Execute(Sql) '执行添加数据

If Err.Number = 0 Then '判断是否有错误发生,

xml = xml&"0" '如果没有错误发生,则证明数据已经成功.返回0

Else

xml = xml&"1" '如果发生错误.则证明有错误发生.数据很可能添加失败

End If

Close_Conn

End Sub

Sub Del_Data '删除数据过程

On Error Resume Next

OpenConn

id = Request("id")

Sql = "Delete From del_table where id="&id

Conn.Execute(sql)

If Err.Number = 0 Then

xml = xml&"0"

Else

xml = xml&"1"

End If

Close_Conn

End Sub

%>

我在服务端使用的是Asp输出xml格式数据技术.我在前几篇都有讲解.你可以使用php,.net,Jsp轻松模拟出来.

(!--#include file="Conn.Asp"--)是我的数据库链接文件.为保安全我不透露数据库名字.本次读取的表名是:del_table  字段为:ID,Content

今天就讲到这里,有什么不明白地方.请加 ajax技术交流群:110167482

下一篇我们讲:ajax读取数据之分页显示篇

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值