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 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
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处理restful请求的路由类分享
2014/02/27 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Python小程序之在图片上加入数字的代码
2019/11/26 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
EJB的角色和三个对象
2015/12/31 面试题
心得体会开头
2014/01/01 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
学雷锋日活动总结
2015/02/06 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
python playwright之元素定位示例详解
2022/07/23 Python