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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
Vue.use源码学习小结
Jun 20 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
vue实现扫码功能
Jan 17 Javascript
js绘制一条直线并旋转45度
Aug 21 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
innerText 使用示例
2014/01/23 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
python实现二分查找算法
2017/09/21 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Python函数中的可变长参数详解
2019/09/12 Python
Python列表list操作相关知识小结
2020/01/29 Python
如何学习Python time模块
2020/06/03 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
求职简历自荐信
2013/10/20 职场文书
最新党员的自我评价分享
2013/11/04 职场文书
草船借箭教学反思
2014/02/03 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
2014企业年终工作总结
2014/12/23 职场文书
公司承诺函范文
2015/01/21 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
开学随笔
2015/08/15 职场文书