jQuery解析与处理服务器端返回xml格式数据的方法详解

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

(0)

相关推荐

  • jQuery解析XML 详解及方法总结

    XML和HTML都是标记语言,语法形式非常相似,同属于一个语言体系.对于HTML的解析,我是使用jQuery非常方便,其实,我们也可以用jquery解析XML,也是同样的方便. 如果你用过Java.PHP等语言解析过XML,相信会跟我有相同的感觉,那就是很麻烦.改用jQuery来读取.分析.操作XML后,给人意想不到的轻松感.下面我们来看看使用jQuery处理XML文件的几种形式方法. 使用JavaScript常规方法解析XML var xmlDoc = request.responseXML;

  • jquery解析XML字符串和XML文件的方法说明

    1.读取XML字符串:例如: 复制代码 代码如下: $(document).ready(function(){ var xml = "<xml><root><record><name>liubl</name></record><record><name>chencp</name</record></root></xml>";//var xml=&qu

  • JQuery解析HTML、JSON和XML实例详解

    1.HTML 有的时候会将一段HTML片段保存在HTML文件中,在另外的主页面直接读取该HTML文件,然后解析里面的HTML代码片段融入到主页面中. fragment.html文件,其内容: 复制代码 代码如下: <div>hello Jquery</div> 在主页面 Test.html中解析代码 复制代码 代码如下: $("#a1").click(function(){     $("#div2").load('fragment.html

  • jQuery xml字符串的解析、读取及查找方法

    本文实例讲述了jQuery xml字符串的解析.读取及查找方法.分享给大家供大家参考,具体如下: xml字符串的解析 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • 使用jquery解析XML的方法

    本文实例讲述了使用jquery解析XML的方法,分享给大家供大家参考之用.具体方法如下: 一.xml文件结构:books.xml <?xml version="1.0" encoding="UTF-8"?> <root> <book id="1"> <name>深入浅出extjs</name> <author>张三</author> <price>88

  • JQuery解析XML数据的几个简单实例

    用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://www.jb51.net/cgi/test.xml', dataType: 'xml', success: function(data

  • jQuery+ajax读取并解析XML文件的方法

    本文实例讲述了jQuery+ajax读取并解析XML文件的方法.分享给大家供大家参考,具体如下: ajax.xml: <?xml version="1.0" encoding="UTF-8"?> <stulist> <student email="1@1.com"> <name>zhangsan</name> <id>1</id> </student>

  • JQuery解析XML的方法小结

    本文实例总结了JQuery解析XML的方法.分享给大家供大家参考,具体如下: 用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://localhost/cgi/test.xml', dat

  • jquery解析XML及获取XML节点名称的实现代码

    jquery获取XML节点名称的几种方法以: • get(0).tagName $(this).get(0).tagName • [0].tagName[0] $(this)[0].tagName • context.nodeName $(this).context.nodeName function getXMLData(){ $.ajax({ url:'data.xml', type: 'GET', dataType: 'xml', timeout: 1000, error: functio

  • jQuery解析XML与传统JavaScript方法的差别实例分析

    本文实例讲述了jQuery解析XML与传统JavaScript方法的差别.分享给大家供大家参考.具体分析如下: 1. 传统javascript方法: var xmlDoc = request.responseXML; try // Build Markers, if available { var markers = xmlDoc.getElementsByTagName("marker") ; for ( var i = 0; i < markers.length ; i++

随机推荐