广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >Ajax中怎么修改数据
  • 588

0
分享到

Ajax中怎么修改数据

2024-04-02 19:04:59 588人浏览 八月长安
摘要

本篇文章给大家分享的是有关ajax中怎么修改数据，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。代码如下:<html> <he

本篇文章给大家分享的是有关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" ></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
%>

以上就是Ajax中怎么修改数据，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网VUE频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Ajax中怎么修改数据

本文链接: https://www.lsjlt.com/news/77499.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Ajax中怎么修改数据
    本篇文章给大家分享的是有关Ajax中怎么修改数据，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。代码如下:<html> <he...
    99+
    2022-10-19
  • 怎么使用ajax修改数据
    这篇文章主要介绍“怎么使用ajax修改数据”，在日常操作中，相信很多人在怎么使用ajax修改数据问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用ajax修改数据”的疑惑有所帮助！接下来，请跟着小编一起来...
    99+
    2023-07-06
  • mysql中怎么修改数据
    mysql中修改数据的方法：1.打开运行窗口；2.输入“cmd”打开命令行窗口；3.输入“mysql -u root -p”命令；4.再输入密码进入mysql控制台；5.通过"UPDATE 表名 SET id ...
    99+
    2022-10-03
  • hbase怎么修改表中数据
    要修改HBase表中的数据，可以使用以下方法之一： 使用put命令：使用put命令将新的值插入或更新到指定的行和列族中。语法如下...
    99+
    2023-10-28
    hbase
  • 怎么用jquery ajax修改文本
    本文小编为大家详细介绍“怎么用jquery ajax修改文本 ”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用jquery ajax修改文本 ”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起...
    99+
    2022-10-19
  • vb怎么修改数据库数据
    要修改数据库数据，你可以使用以下步骤来进行操作：1. 首先，你需要创建一个连接到你的数据库的连接对象。你可以使用 `SqlConne...
    99+
    2023-08-30
    数据库
  • php怎么修改数据库数据
    要修改数据库数据，可以使用PHP提供的数据库操作函数或扩展来实现。以下是一种常见的方法，使用PHP的PDO扩展来连接数据库并修改数据...
    99+
    2023-08-17
    php 数据库
  • 在Navicat中怎么修改数据表
    要在Navicat中修改数据表，您可以按照以下步骤操作：1. 打开Navicat，连接到您的数据库服务器。2. 在左侧窗格中，展开数...
    99+
    2023-10-11
    navicat
  • 数据库中怎么修改视图
    要修改数据库中的视图，可以使用SQL语句来实现。具体步骤如下： 打开数据库管理工具（如MySQL Workbench）并连接到相...
    99+
    2023-10-26
    数据库
  • MySQL中怎么修改数据类型
    这期内容当中小编将会给大家带来有关MySQL中怎么修改数据类型，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。类型 大小 范围（有符号） 范围（无符...
    99+
    2022-10-18
  • access怎么修改数据库表中的数据
    要修改数据库表中的数据，可以使用SQL语句中的UPDATE语句。具体的语法为：```UPDATE 表名 SET 列名1=新值1, 列...
    99+
    2023-09-20
    access 数据库
  • Oracle BBED怎么修改数据块中的数据
    本篇内容介绍了“Oracle BBED怎么修改数据块中的数据”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！...
    99+
    2022-10-18
  • weblogic怎么修改数据源
    要修改WebLogic中的数据源，可以按照以下步骤进行操作：1. 登录到WebLogic控制台。通常情况下，控制台的URL为`htt...
    99+
    2023-10-07
    weblogic
  • php simplexml怎么修改数据
    本文操作环境：Windows7系统、PHP7.1版、DELL G3电脑php simplexml怎么修改数据？PHP的SimpleXML修改XML数据一 代码<php header('Content-Type:text/ht...
    99+
    2018-03-16
    php simplexml
  • Oracle中怎么修改数据库连接数
    这期内容当中小编将会给大家带来有关Oracle中怎么修改数据库连接数，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。windows系统 Oracle 数据库连接数的修改&n...
    99+
    2022-10-18
  • MySQL怎么修改数据表的数据
    MySQL修改数据的关键语句是”UPDATE“其语法如下：UPDATE table_name SET field1=new-value1, field2=new-value2[WHERE Claus...
    99+
    2022-10-18
  • 怎么使用phpmyadmin修改数据表中的数据
    小编给大家分享一下怎么使用phpmyadmin修改数据表中的数据，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！1、首先打开需要修改数据的数据库2、接着打开需要修改数据的数据表，然后点击菜单栏中...
    99+
    2022-10-18
  • 怎么用PHP修改MySQL数据库中的数据
    这篇文章主要介绍“怎么用PHP修改MySQL数据库中的数据”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么用PHP修改MySQL数据库中的数据”文章能帮助大家解决问题。我们假设你已经安装好了 Ap...
    99+
    2023-07-05
  • MySQL数据库中怎么修改密码
    今天就跟大家聊聊有关MySQL数据库中怎么修改密码，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。　　MySQL数据库修改MySQL密码有哪些措施　　...
    99+
    2022-10-18
  • mysql中怎么修改数据库目录
    今天就跟大家聊聊有关mysql中怎么修改数据库目录，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。环境:　　OS:Red Hat Linux As 5...
    99+
    2022-10-18
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作