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 继承的实现
Jul 09 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
js中的闭包学习心得
Feb 06 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 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
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
深入浅出vue图片路径的实现
2019/09/04 Javascript
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
python 调用Google翻译接口的方法
2020/12/09 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
教师找工作推荐信
2013/11/23 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
一年级学生评语
2014/04/23 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
商务信函英语问候语
2015/11/10 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
PHP解决高并发问题
2021/04/01 PHP
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis