jQuery解析与处理服务器端返回xml格式数据的方法详解


Posted in Javascript onJuly 04, 2016

本文实例讲述了jQuery解析与处理服务器端返回xml格式数据的方法。分享给大家供大家参考,具体如下:

1.php代码:

<?php
  header("Content-Type:text/xml; charset=utf-8");//声明浏览器端返回数据的格式为xml文档格式
  echo "<?xml version='1.0' encoding='utf-8'?>".
     "<comments>".
     "<comment username='{$_REQUEST['username'] }' >".
     "<content>{$_REQUEST['content']}</content>".
     "</comment>".
     "</comments>";
?>

2.html代码:

<form id="form1" action="#">
  <p>评论:</p>
  <p>姓名: <input type="text" name="username" id="username" /></p>
  <p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p>
  <p><input type="button" id="send" value="提交"/></p>
</form>
<div class='comment'>已有评论:</div>
<div id="resText" ></div>

3.jQuery代码:

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
1.由于服务器端返回的数据格式是xml文档,因此需要对返回的数据进行处理,jquery处理xml文档与处理html文档一样,也可以使用常规的attr()、find()、filter()以及其它方法
2.返回数据格式为xml文档的过程实现起来比html片段要稍微复杂点,但xml文档的可移植性是其他数据格式无法比拟的,因此以这种格式提供的数据的重用性将极大提高
3.很多知名网站和开放平台都是以xml格式输出数据,合作者可利用他们提供的API,将获得的内容整合到自己的网站中
4.xml文档体积相对较大,与其它文件格式相比,解析和操作他们的速度要慢一些
5.由于期待服务器端返回的数据格式是xml文档,因此需要在服务器端设置content-type类型,如:
header("content-type:text/xml;charset=utf-8");
*/
$(function(){
  $("#send").click(function(){
   $.get("get2.php", {
      username : $("#username").val() ,
      content : $("#content").val()
     }, function (data, textStatus){
      //data:xml格式的数据;从data【xml格式数据】中查找comment元素username属性的值
      var username = $(data).find("comment").attr("username");//跟解析html文档类似
      var content = $(data).find("comment content").text();
      var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
      $("#resText").html(txtHtml); // 把返回的数据添加到页面上
     });
  })
})
</script>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
JS画线(实例代码)
Nov 20 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 #Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 #Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 #Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 #Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 #Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 #Javascript
全面了解js中的script标签
Jul 04 #Javascript
You might like
15种PHP Encoder的比较
2007/04/17 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
php源码的使用方法讲解
2019/09/26 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
python实现扫描日志关键字的示例
2018/04/28 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
如何提高SQL Server的安全性
2016/07/25 面试题
编辑求职信样本
2013/12/16 职场文书
证婚人经典证婚词
2014/01/09 职场文书
小学防溺水制度
2014/01/29 职场文书
企业消防安全制度
2014/02/02 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
年会邀请函范文
2015/01/30 职场文书
承诺书范本大全
2015/05/04 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫
使用Django框架创建项目
2022/06/10 Python