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 相关文章推荐
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
JavaScript数据类型详解
Apr 01 Javascript
JavaScript Split()方法
Dec 18 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 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
2006/10/09 PHP
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
YII框架常用技巧总结
2019/04/27 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
基于jquery的表格排序
2010/09/11 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
办护照工作证明范本
2014/01/14 职场文书
初一地理教学反思
2014/01/16 职场文书
和睦家庭事迹
2014/05/14 职场文书
接收函格式
2015/01/30 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
2015年维修工作总结
2015/04/25 职场文书
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python