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来解决ajax读取页面乱码
Nov 28 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
javascript折半查找详解
Jan 26 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 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
我的论坛源代码(九)
2006/10/09 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
js实现微信分享代码
2020/10/11 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
原生JS进行前后端同构
2018/04/22 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
python3编码问题汇总
2016/09/06 Python
基于python 字符编码的理解
2017/09/02 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
过滤器的用法
2013/10/08 面试题
团工委书记自荐书范文
2013/12/17 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
出国留学导师推荐信
2015/03/26 职场文书
毕业赠语大全
2015/06/23 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
美元符号 $
2022/02/17 杂记
JAVA springCloud项目搭建流程
2022/05/11 Java/Android