Ajax修改数据即时显示篇实现代码

我们这次要请求的服务端网页是:Edit_Data.Asp 待会我会在本次ajax教程中提供该asp文件的源码.

其实在你学会了怎么使用ajax添加数据时,想实现修改数据对你来说已经很容易了!费话不说先看前端的JavaScript代码和本次的ajax实例效果!

复制代码 代码如下:

<html>

<head>

<title>ajax修改数据</title>

<style>

body{

font-size:12px;

}

</style>

</head>

<body>

<p>同时在线测试的人很多,有时可能会出现并发修改现象.</p>

<hr/>

<table border="1">

<thead><tr><td>数据编号</td><td>数据内容</td></tr></thead>

<tbody id="a"><!--用于存放内容的tbody-->

</tbody>

</table>

输入编号:<input id="data_id" type="text" /><br/>

修改内容:<input id="data_content" type="text" /><br/>

<input type="button" value="确定修改" onclick="Edit_Data()"/>

<span id="msgaes" style="color:red"></span>

<script type="text/javascript">

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<msXmlhttp.length; 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","Edit_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");//获取展示数据的表格

for(var i=0;i<list.length;i++){

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

for(var k=0;k<list[i].childNodes.length;k++){ //遍历每个list中的子元素

var td = tr.insertCell();//每个list中有几个子元素,便为一行增加几列

td.innerHTML = list[i].childNodes[k].firstChild.nodeValue;//在单元格内写入第i个list的第k个子元素中的文本内容

}

}

}

}

}

}

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

}

window.load = Read();

//修改数据的函数

function Edit_Data(){

var msgaes = document.getElementById("msgaes");//用来显示一些当前操作信息

var id = document.getElementById("data_id");//获取要修改的数据编号

var content = document.getElementById("data_content");//获取修改后的内容

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

msgaes.innerHTML = "编号或内容不许为空!";

return;

}

//下面这行将id和content的值赋给param变量,然后用send方法提交param

var param = "id="+escape(id.value)+ "&content="+escape(content.value);

var ajax = ajax_xmlhttp();

ajax.open("post","Edit_Data.asp?action=edit",true);

ajax.onreadystatechange = function(){//

if(ajax.readyState == 4){

if(ajax.status == 200){

var xmlData = ajax.responseXML;

var msg = xmlData.getElementsByTagName("msg");

if(msg.length!=0){

switch (msg[0].firstChild.nodeValue){//判断msg的值

case "0": msgaes.innerHTML = "修改数据成功!";

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

for(var i=0;i<a.rows.length;i++){//遍历表格的每一列.这个方法有点笨

for(var k=0;k<a.rows[i].cells.length;k++){

if(a.rows[i].cells[0].innerHTML == id.value){

a.rows[i].cells[1].innerHTML = content.value;

id.value="";

content.value="";

return;

}

}

}

break;

case "1": msgaes.innerHTML = "服务端写入数据时发生错误!";

break;

case "3": msgaes.innerHTML = "请正确填写要修改的数据编号和修改内容!";

break;

case "4": msgaes.innerHTML = "数据库中不存在你输入的数据编号,请重新输入!";

break;

default: msgaes.innerHTML = "发生未知错误!请联系作者:QQ30458885";

break;

}

}

}

}

}

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

ajax.send(param);

}

</script>

</body>

</html>

我们来分析上面的ajax前端的代码.代码中一共有三个函数.分别为:ajax_xmlhttp(),Read(),Edit_Data().我们依次来讲解他们的作用.

1、alax_xmlhttp():用来创建一个可用得XMLHTTPRequest对象,如果你还不知道什么是XMLHTTPRequest,请参考:XMLHTTPRequest对象详解

2、Read():读取数据函数,用来读取服务端数据库中已存在的数据.该函数与前几篇的读取数据函数基本上差不多.我不再重复讲解相同之处.如不明白.请参阅前几篇ajax系列教程!只是在返回xml数据以后的解析中略有不同.先看下服务端读取数据的格式: Edit_Data.Asp?action=read. 在服务端输出的xml数据中有5个list标签.这代表数据库中有5条数据.而每个list的标签下面包含着id和content两个子元素.这正是数据库中的每条数据的内容. id字段和content字段.明白了这些.我们来讲Read函数的是如何解析这些返回的xml数据的.从list=xmlData.getElementsBytagName("list")的开始讲起,首先使用if来判断这些list标签是否被成功获取,如果是,则获取我们显示数据的表格.然后使用for遍历 这些list.每循环一个list的就为我们要显示数据的表格增加一行,因为每个list的内含着一条数据内容.而我们的表格每一行要显示一条数据.那么每一行创建完以后.我们再使用一个for来遍历当前list的子元素.每遍历一个子元素便为该行增加一列.然后再 为该列写入当前list中的第k个子元素的文本内容.第一列对应id里的内容,第二列对应content里的内容.如果你还不明白我再讲什么.请恶补一下javascript的for循环!和涉及到的Dom相关指令.本站提供的Dom手册有每个指令的详细解释!

3、Edit_Data():该函数用来提交你输入的数据编号和要修改的数据内容.只要数据被成功提交以后.无论发生什么事情.服务端都会返回一个msg标签.Edit_Data函数接收返回的msg标签.根据msg标签的内容来判断数据修改的情况.跟上一篇的"ajax添加数据"教程中的 Add_Data函数也基本相同.如有不明白之处.请参考上篇的ajax添加数据教程.我重点讲一下Edit_Data函数中是如何将修改后的内容即时显示到表格的!从msg=xmlData.getElementsByTagName("msg")开始讲起.首先if判断msg是否存在.如果已取得msg标签.便根据msg标签中的内容来判断服务端的修改结果. msg内容为0代表数据被成功修改,这时我们在前端显示数据的表格内找到你输入编号的那一行.然后把你输入的修改数据写入到该行的第二列中去.此时我们并没有重复读取数据库中的数据!如有疑惑之处请参照上一篇的教程.

下面是服务端的Edit_Data.Asp文件的源码:

复制代码 代码如下:

<!--#include file="Conn.Asp"-->

<%

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

'作者:康董

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

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

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

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

Select case action

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

Call Read

case "edit" '如果为edit则执行修改数据操作

Call Edit_Data

case else

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

End Select

xml=xml&"</body>"

Response.Clear

Response.ContentType="text/xml"

Response.CharSet="gb2312"

Response.write xml

Response.End

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

Call OpenConn '打开数据库链接

Sql = "Select * From edit_table" '打开数据库中名字为web_table的表

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

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

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

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

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

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

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

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

Close_Conn '关闭数据库链接

End Sub

Sub Edit_Data

On Error Resume Next '忽略错误

OpenConn '打开数据库链接

id = Trim(Request.Form("id")) '接收客户端传过来的id数据编号

Sql = "Select * From edit_table Where id="&id

Set Rs=Conn.Execute(Sql)

If Rs.Eof then

xml = xml&"<msg>4</msg>"

Exit Sub

End If

content = Trim(Request.Form("content")) '接收修改后的内容

If id = "" Or content = "" Then '如果id或content有一项为空,返回3

xml = xml&"<msg>3</msg>"

Exit Sub '退出过程

End If

Sql = "Update edit_table Set content='"&content&"' Where id="&id

Conn.Execute(Sql) '执行修改数据的sql语句

If Err.Number = 0 Then '如果没有错误发生

xml = xml&"<msg>0</msg>" '添加一个msg标签,内容为0

Exit Sub '退出过程

Else '如果有错误发生

xml = xml&"<msg>1</msg>" '如果有错误发生,添加msg标签,内容为1

Exit Sub '退出过程

End If

End Sub

%>

该asp的源码中使用的数据库表是:edit_table 字段分别为:id,content. 表中有5条数据分别是:html,css,dom,javascript,ajax.该源码的知识在上一篇ajax教程有详细解释!

友情提醒:该ajax教程是系列性的.为减少篇幅.我们不会在每一篇教程中重复讲解学习过的内容.如果你是初学者,请从ajax开始准备篇.逐一学习!谢谢合作!

下一篇我们讲:"ajax添加与删除篇"

本文版权归:Web圈 首发地址:http://Www.Web666.Net

时间: 2024-10-25 13:29:16

Ajax修改数据即时显示篇实现代码的相关文章

Ajax修改数据即时显示篇实现代码_AJAX相关

我们这次要请求的服务端网页是:Edit_Data.Asp 待会我会在本次ajax教程中提供该asp文件的源码. 其实在你学会了怎么使用ajax添加数据时,想实现修改数据对你来说已经很容易了!费话不说先看前端的JavaScript代码和本次的ajax实例效果! 复制代码 代码如下: <html> <head> <title>ajax修改数据</title> <style> body{ font-size:12px; } </style>

Ajax添加数据即时显示信息篇_AJAX相关

今天我们要学习的内容是:使用ajax向服务端的数据库添加数据,然后在网页不刷新情况下即时显示被添加的数据.需要说明的是.本次ajax实例教程与前3篇有2点大不同之处. 1:我们要对数据库进行操作.2:更换请求的服务端网页.不再使用Web_ajax.Asp文件.新的请求网页是:Add_Data.Asp.看后缀大家就应该能明白.我在服务端采用的技术是Asp.都说Asp过时了.可他的简单易用,易学深深地吸引着我!当然也你可以使用php, .net,或jsp轻松的模拟该Asp文件的源码.我会在该次教程最

Ajax添加数据即时显示信息篇

今天我们要学习的内容是:使用ajax向服务端的数据库添加数据,然后在网页不刷新情况下即时显示被添加的数据.需要说明的是.本次ajax实例教程与前3篇有2点大不同之处. 1:我们要对数据库进行操作.2:更换请求的服务端网页.不再使用Web_ajax.Asp文件.新的请求网页是:Add_Data.Asp.看后缀大家就应该能明白.我在服务端采用的技术是Asp.都说Asp过时了.可他的简单易用,易学深深地吸引着我!当然也你可以使用php, .net,或jsp轻松的模拟该Asp文件的源码.我会在该次教程最

Ajax读取数据到表格的实现代码_AJAX相关

今天我们要讲的是:使用Ajax无刷新技术读取服务端多条数据,并将返回的数据显示到一个表格内.同时我还将展示,如何使用JavaScript脚本和Dom接口,来为网页创建一个表格 .将ajax请求的数据显示到该表格内. 本次的ajax实例效果中请求的服务端网页依然是:Web_ajax.Asp 该网页使用了Asp输出xml技术.如果你还不知道如何使用Asp输出xml请返回:"ajax开始准备篇" 提醒:在每篇ajax教程的实例开始之前,你必须查看当天的Web_ajax.asp文件中的数据结构.因为我们

Ajax获取数据然后显示在页面的实现方法_AJAX相关

主要功能流程介绍 循环获取列表数据 点击列表数据进入详情页 点击报名参加弹出报名成功提示框 点击提示框中的确定按钮,跳回列表页 代码实现流程和解说 一.列表页 1.访问链接list.php时判断是pc端还是客户端 $user_agent_arr = mall_get_user_agent_arr(); if(MALL_UA_IS_PC == 1) { //****************** pc版 ****************** include_once './list-pc.php';

Ajax获取数据然后显示在页面的实现方法

主要功能流程介绍 循环获取列表数据 点击列表数据进入详情页 点击报名参加弹出报名成功提示框 点击提示框中的确定按钮,跳回列表页 代码实现流程和解说 一.列表页 1.访问链接list.php时判断是pc端还是客户端 $user_agent_arr = mall_get_user_agent_arr(); if(MALL_UA_IS_PC == 1) { //****************** pc版 ****************** include_once './list-pc.php';

Ajax读取数据到表格的实现代码

今天我们要讲的是:使用Ajax无刷新技术读取服务端多条数据,并将返回的数据显示到一个表格内.同时我还将展示,如何使用JavaScript脚本和Dom接口,来为网页创建一个表格 .将ajax请求的数据显示到该表格内. 本次的ajax实例效果中请求的服务端网页依然是:Web_ajax.Asp 该网页使用了Asp输出xml技术.如果你还不知道如何使用Asp输出xml请返回:"ajax开始准备篇" 提醒:在每篇ajax教程的实例开始之前,你必须查看当天的Web_ajax.asp文件中的数据结构.因为我们

jQuery Ajax 异步加载显示等待效果代码分享_jquery

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

AnyChart 中的Doughnut Chart 如何修改数据的显示颜色

问题描述 AnyChart中的DoughnutChart如何修改数据的显示颜色如图:"图中有四种数据如何把图形修改成四种颜色? 解决方案