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中使用inline函数的问题
Mar 08 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
js写的评论分页(还不错)
2013/12/23 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
原生JavaScript实现换肤
2021/02/19 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
优秀辅导员事迹材料
2014/02/16 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
教师一岗双责责任书
2014/04/16 职场文书
服务之星事迹材料
2014/05/03 职场文书
法律专业自荐信
2014/06/03 职场文书
交通事故和解协议书
2014/09/25 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery