用Ajax实现不刷新页面修改内容

2023-11-05

趁今天有空,就学习了Ajax,在Ajax in action那本书里提到了SAjax,就去下来看看,果然功能强大,让编写Ajax代码变的很简单,于是就写了个“修改内容不刷新页面”的代码,这个功能在网上以前是到处看到,今天终于自己实现了个,代码里有了PHP5的DOM函数,由于这个Blog空间只支持PHP4,所以也就没法在这里运行了。

XML文件,代码从这个文件中读取并在修改后写入到该文件

下载: test.xml
  1. <?xml version="1.0"?>
  2. <test>
  3. <value>编辑文本</value>
  4. </test>

以下是代码:

下载: text.php
  1. <?php
  2.  require("Sajax.php");
  3.  
  4.  
  5.   function showxml(){   //从test.xml读取,参考PHP DOM
  6.     $doc=new DOMDocument();
  7. $doc->load("test.xml");
  8. $hello=$doc->getElementsByTagName("value")->item(0)->nodeValue;
  9. return $hello;
  10.   }
  11.  
  12.   function changexml($text){ //写入到test.xml文件
  13.     $doc=new DomDocument();
  14. $doc->load("test.xml");
  15. $doc->getElementsByTagName("value")->item(0)->nodeValue=$text;
  16. $doc->save("test.xml");
  17. $hello=$doc->getElementsByTagName("value")->item(0)->nodeValue;
  18. return $hello;
  19.   }
  20.  
  21.   sajax_init();
  22.   $sajax_debug_mode=0; //关闭调试信息
  23.   sajax_export("showxml","changexml");  //sajax输出showxml,changexml两个js函数
  24.   sajax_handle_client_request();  //sajax对客户端响应后的处理
  25.  
  26. ?>
  27.  
  28. <html>
  29. <head>
  30. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  31.  
  32. <script language="javascript">
  33. <?php sajax_show_javascript(); ?> //sajax输出ajax代码及sajax_export的两个函数
  34.  
  35. function show(text){
  36. document.getElementById("hello").innerHTML=text;
  37. }
  38.  
  39. function showxml(text){   
  40.     x_showxml(text,show);  //由sajax输出的showxml函数,默认在原函数名前加了"x_"
  41. }
  42.  
  43. function changexml(text){ 
  44.     x_changexml(text,show)  //原PHP的changexml函数
  45.  
  46. }
  47.  
  48. var span,input;
  49.  
  50. function  edit(){
  51. span=document.getElementById("hello");
  52. input=document.createElement("input");
  53. input.setAttribute("type","text");
  54. input.setAttribute("id","input");
  55. input.setAttribute("value",span.innerHTML);
  56. document.body.replaceChild(input,span);
  57. }
  58.  
  59. function save(){
  60. changexml(input.value);
  61. document.body.replaceChild(span,input);
  62. }
  63.  
  64. </script>
  65.  
  66. <title>sajax Test....</title>
  67. </head>
  68. <body onLoad="showxml()">
  69.  
  70. <span id="hello"   onClick="edit()">loading...</span>
  71. <p>点击上面的文本即可修改,实现不刷新页面修改内容并显示</p>
  72. <input type="button"  name="hello" value="修改"  onClick="save()">
  73.  
  74.  
  75. </body>
  76. </html>
Tags: ajax, dom, JavaScript, php, Sajax, xml  
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

用Ajax实现不刷新页面修改内容 的相关文章

  • 如何理解 Angular JS 中的控制台错误消息?有什么工具吗?

    我是 Angular JS 的新手 我的第一个问题是如何理解 Angular JS 中控制台的错误消息 我编写了这段用于匹配密码的代码片段 它在控制台上抛出错误 但它工作正常 它是有线的 我无法从这些控制台消息中理解任何内容 谁能指出我为什
  • 我可以从 HTTP 请求中找到无线接入点的 BSSID(MAC 地址)吗?

    假设有人在咖啡店里无线连接到互联网 并向 johnsveryownserver com 发送 HTTP 请求 服务器端 有什么方法可以确定我的MAC地址吗 无线接入点他们连接到什么 请注意 我对他们机器的 MAC 地址不感兴趣 如果我无法使
  • Twisted 的 Deferred 和 JavaScript 中的 Promise 一样吗?

    我开始在一个需要异步编程的项目中使用 Twisted 并且文档非常好 所以我的问题是 Twisted 中的 Deferred 与 Javascript 中的 Promise 相同吗 如果不是 有什么区别 你的问题的答案是Yes and No
  • ant-d upload中如何为removeFile添加PopConfirm一个图片文件

    我正在使用 Ant d Upload 通过本地系统上传文件 然后单击文件预览图像上的删除图标 图像文件将被删除 我想添加一个弹出确认 所以我尝试在 onRemovefunction 中添加确认作为承诺但它不起作用 它在浏览器中显示警报 on
  • 计算Javascript中两次点击之间的时间

    我想用 javascript 计算属性的两次点击之间的时间 但我不知道如何 例如 a href click here a 如果用户单击多次 假设 5 秒内 我想显示警报 如果有帮助的话我正在使用 jQuery 我对 javascript 不
  • 将音频与视频流合并 Node.js

    我正在创建 YouTube 视频下载器并且正在使用ytdl core库 它无法下载带有音频的高质量视频 因为 youtube 将其放在另一个文件中 但我需要将其全部下载到一个文件中 我已经这样做了 app get download asyn
  • 如何在 d3 js 中突出显示从根到选定节点的路径?

    我使用 d3 js 创建了一棵树 现在我创建了一个下拉菜单 其中包含树中所有节点的列表 现在 从下拉菜单中选择一个节点时 我想突出显示从根到该特定节点的路径 这个怎么做 首先创建一个 flatten 函数 它将分层数据变成一个 n 数组 f
  • 使用模态表单 ajax 超出 HTMLFormElement.toString 的最大调用堆栈大小

    我想使用模态窗口中的 ajax 请求提交表单 单击此链接可打开该模式 a class btn btn primary i class fa fa edit i Write a review a 模态窗口 div class modal fa
  • 在 MVC Razor 中的 C# 和 Javascript 之间共享常量

    我想在服务器上的 C 和客户端上的 Javascript 中都使用字符串常量 我将常量封装在 C 类中 namespace MyModel public static class Constants public const string
  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以
  • 如何在 kotlin 中检查 lambda 空值

    在 Kotlin 中如何检查 lambda 是否为空 例如 我有这样的签名 onError Throwable gt Unit 我如何区分它的默认值是应用于主体还是应用于此函数的值 您无法测试 lambda 的主体是否为空 因此它不包含源代
  • 如何从顺序键盘导航中删除 Vuetify 附加图标

    在带有 Vuetify 的 Vue js 应用程序中 我有一组用v text field并且其中有一个append icon为了切换文本可见性 如下所示
  • 从多维无穷大数组中删除数组元素

    我想删除一个特定元素 例如 我想删除元素id 76在下面的数组中 而且 数组可以无限地组合在一起 这里的问题是我无法刷新页面 因为我使用 Vue js 进行即时操作 如果我能做到这一点 我的下一个问题可能是如何在我现在想要的地方添加一个元素
  • ng-model 和值组合不适用于输入文本框

    我有两个输入文本框 我需要组合在两个文本框中输入的值并将其显示在第三个文本框中 如果我只使用value在第三个文本框中 Box 1
  • 需要js、d3 和 nvd3 集成

    我面临整合的问题要求 questions tagged requirejs with d3 questions tagged d3 and nvd3 questions tagged nvd3 我找到了一个使用 require 的简单解决方
  • 您如何看待引导模式触发器的相应回调?

    On 引导模态 http getbootstrap com javascript modals 我们知道我们可以为触发器绑定事件 例如show or hide using show shown hide hidden 但此事件绑定仅适用于一
  • 在javascript中动态生成行?

    我是 javascript 新手 我想在按下 Tab 时动态生成行 并希望获取在动态生成的行中输入的值 以便我可以在 servlet 代码中使用这些值 这是我的html
  • 如何在 SVG 元素上使用箭头标记?

    我需要在 d3 js 中创建一个箭头 但我找到的只是带有节点图的示例 我需要的是简单地制作一个从 A 点到 B 点的箭头 我尝试实现以下示例中的部分代码 http bl ocks org 1153292 http bl ocks org 1
  • Bootstrap 3 / 显示模式不适用于 javascript 方式

    我用Modal http getbootstrap com javascript modalsBootstrap 3 0 的功能 我有这个代码 a href myNestedContent Open the modal containing
  • 如何调试 Gulp 任务?

    如何调试我的中定义的 gulp 任务gulpfile js使用诸如 Google Chrome 调试器之类的调试器逐行单步执行任务的代码 对于 Node js 6 3 版本 您可以使用 inspect flag https nodejs o

随机推荐

  • SeekBar自定义(颜色,大小,图片)

    要实现下面图的效果 import android os Bundle Seekbar 自定义 颜色 author Andy public class TestSeekBar extends Activity Override protect
  • Android Studio 3.0正式版填坑之路

    Android Studio 3 0启动图 序言 总看别人的文章 今天尝试着自己来写一篇 在逛论坛时候 无意间发现Android Studio 3 0正式版本推送更新了 早听说AS 3 0添加了许多新功能 然后手贱迫不及待地想先睹为快 结果
  • FreeRTOS系列

    本文主要介绍如何在任务或中断中向队列发送消息或者从队列中接收消息 使用STM32CubeMX将FreeRTOS移植到工程中 创建两个任务以及两个消息队列 并开启两个中断 两个任务 Keyscan Task 读取按键的键值 并将键值发送到队列
  • JavaScript异步编程---同步模式、异步模式、回调函数

    概述 众所周知 当前主流的JavaScript环境都是以单线程模式去执行代码的 其原因和当时设计该语言的初衷有关系 最早这门语言就是运行在浏览器上的脚本语言 目的是为了实现页面上的动态交互 其核心就是dom操作 该点决定了他必须要使用单线程
  • protobuf详细介绍和使用

    一 protobuf初识 一 protocol buffers 是什么 protocol buffers 是一种灵活 高效 自动化机制的结构数据序列化方法 可类比 XML 但是比 XML 更小 更快 更为简单 你可以定义数据的结构 然后使用
  • ChatGPT帮你30秒生成大师销售文案『AI效率神器』

    一篇好的销售文案大家都应该知道其重要性 但是 想要撰写一篇好的销售文案也并不容易 尤其是对于新手来说 需要有一定的写作技巧和经验 但是现在有了ChatGPT就不用担心啦 即便你是个完完全全的菜鸟 也可以利用AI轻松快速的模仿出销售大师才能撰
  • Git教程 - 如何新建干净的分支?(不基于其他分支)

    背景 分支整理 想要在原有GIT项目上创建一个新分支 但从浏览器端操作 发现都必须要基于其他分支创建 这样的话 新分支会包含旧分支的代码和历史提交信息 这里想创建一个空白的分支 尝试了以下方法解决 步骤 clone远程项目 git clon
  • Mybatis

    本文章根据尚硅谷在哔哩哔哩发布的视频的评论区中的网友 拂星星 提供的markdown文档整理而来 1 Mybatis简介 1 1 MyBatis历史 MyBatis最初是Apache的一个开源项目iBatis 2010年6月这个项目由Apa
  • Vuforia——VuMark 的使用

    一 创建KEY就不详说了 二 创建VuMark图片 Download DataBase 将资源导入 unity 其中Gnerate VuMark用于下载供手机扫描的不同ID图片 三 将图中两个预制物拖入Hierarchy中 填入key 勾选
  • [激光原理与应用-51]:《激光焊接质量实时监测系统研究》-2-激光焊接及其物理现象

    目录 2 1 激光焊接过程概述 2 1 1 激光焊接的特点 2 1 2 焊接质量的影响因素 2 1 3 激光焊接热源模型 2 1 4 激光焊接技术的发展前景与面临的挑战 2 2 激光焊接中的小孔效应及光致等离子体 2 2 1 激光焊接中的小
  • 什么是「推荐系统」,有哪些主要的推荐方法?

    1 什么是推荐系统 什么是推荐系统 根据维基百科的定义 它是一种信息过滤系统 主要功能是预测用户对物品 的评分和偏好 这一定义回答了推荐系统的功能是过滤信息 连接用户和推送信息 将这一定义扩 展一下 推荐系统就是自动联系用户和物品的一种工具
  • Win7系统提示Windows Defender无法扫描选定的文件解决方法

    Win7 64位系统提示 Windows Defender无法扫描选定的文件 怎么办呢 使用Windows Defender扫描文件 结果弹出如下图窗口 该怎么解决呢 参考下文 一起来解决Win7系统提示 Windows Defender无
  • 好玩的人脸识别小软件

    好玩的人脸识别小软件 前言 使用教程 1 软件代码 2 使用步骤 致谢 前言 在毕业的小空闲里面 利用pyqt写了一个简单实现人脸检测的小软件 非常好玩 推荐给大家玩一下 主要是利用Retinaface和Facenet实现人脸识别的 这两个
  • 将jpg格式的图片转换成eps

    bmeps c fig1 jpg fig1 eps
  • Python爬虫数据提取方式——-selenium爬虫框架中的数据提取方式

    介绍 selenium测试框架在爬虫中的应用 网页中通过js渲染的数据 爬虫的解决办法 1 去静态源码中查找 2 抓包或者网络请求中 查看是否有类似与json的get请求 直接请求这个json的API拿到数据 3 使用phantomjs s
  • element-ui 改变一行的样式row-style

    element ui 改变一行的样式row style 在工作过程中需要改变elementui的row style 在百度上查了很久结果都是一样的 rowStyle row rowIndex if rowIndex 0 return col
  • 华为OD机试 - 事件推送(Python)

    题目描述 同一个数轴X上有两个点的集合A A1 A2 Am 和B B1 B2 Bn Ai和Bj均为正整数 A B已经按照从小到大排好序 A B均不为空 给定一个距离R 正整数 列出同时满足如下条件的所有 Ai Bj 数对 Ai lt Bj
  • LaTeX 排版常用技巧 - 逐渐积累

    1 箭头上的文字 你的文字 underrightarrow text 你的文字 你的文字 underrightarrow text 你的文字 更喜欢另一种方式 CPU stackr
  • 散列表查找成功和不成功时的平均查找长度

    已知散列表长度为13 散列函数为H key key 11 处理冲突的方法为线性探测法 请画出依次插入关键字 10 8 40 27 21 57 46 23 19 56 以后的散列表 并计算查找成功和不成功时的平均查找长度 解 散列表是哈希表的
  • 用Ajax实现不刷新页面修改内容

    趁今天有空 就学习了Ajax 在Ajax in action那本书里提到了SAjax 就去下来看看 果然功能强大 让编写Ajax代码变的很简单 于是就写了个 修改内容不刷新页面 的代码 这个功能在网上以前是到处看到 今天终于自己实现了个 代