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实现的支持lrc歌词的播放器
May 17 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
vue使用watch监听属性变化
Apr 30 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提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
js使用递归解析xml
2014/12/12 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python sys.argv[]用法实例详解
2018/05/25 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
大学生入党自我鉴定
2013/10/31 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
放射科岗位职责
2015/02/14 职场文书
教师师德表现自我评价
2015/03/05 职场文书
预备党员表决心的话
2015/09/22 职场文书
护士业务学习心得体会
2016/01/25 职场文书
高二化学教学反思
2016/02/22 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript