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 框架小结 个人工作经验
Jun 13 Javascript
优化 JavaScript 代码的方法小结
Jul 16 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
php 读取文件乱码问题
2010/02/20 PHP
php数组键名技巧小结
2015/02/17 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Django 连接sql server数据库的方法
2018/06/30 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
init进程的作用
2015/08/20 面试题
外语系大学生自荐信范文
2014/03/01 职场文书
学用政策心得体会
2014/09/10 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
学校施工安全责任书
2015/01/29 职场文书
小学教师党员承诺书
2015/04/27 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
公司车队管理制度
2015/08/04 职场文书
python实现三次密码验证的示例
2021/04/29 Python