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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
jQuery 创建Dom元素
May 07 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
javascript实现函数柯里化与反柯里化过程解析
Oct 08 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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
django使用xadmin的全局配置详解
2019/11/15 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
生产主管岗位职责
2013/11/10 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
医药个人求职信范文
2014/01/29 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
2014年计生工作总结
2014/11/21 职场文书
高一数学教学反思
2016/02/18 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
浅析JavaScript中的变量提升
2022/06/01 Javascript