Detailed Explanation of jQuery Parsing and Processing of xml Format Data Returned from Server

  • 2021-07-02 22:56:01
  • OfStack

This paper describes the method of jQuery parsing and processing the xml format data returned from the server. Share it for your reference, as follows:

1. php code:


<?php
  header("Content-Type:text/xml; charset=utf-8");// Declares that the format of the data returned by the browser side is xml Document format 
  echo "<?xml version='1.0' encoding='utf-8'?>".
     "<comments>".
     "<comment username='{$_REQUEST['username'] }' >".
     "<content>{$_REQUEST['content']}</content>".
     "</comment>".
     "</comments>";
?>

2. html code:


<form id="form1" action="#">
  <p> Comments :</p>
  <p> Name : <input type="text" name="username" id="username" /></p>
  <p> Content : <textarea name="content" id="content" rows="2" cols="20"></textarea></p>
  <p><input type="button" id="send" value=" Submit "/></p>
</form>
<div class='comment'> Comments already made: </div>
<div id="resText" ></div>

3. jQuery code:


<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
1. Because the data format returned by the server is xml Document, so the returned data needs to be processed, jquery Deal with xml Documentation and processing html Document 1 You can also use the regular attr() , find() , filter() And other methods 
2. The returned data format is xml The process of documentation is implemented more than that of html The fragment is a little more complicated, but xml The portability of documents is unmatched by other data formats, so the reusability of data provided in this format will be greatly improved 
3. Many well-known websites and open platforms are based on xml Format output data, and collaborators can use the API Integrate the content you get into your own Web site 
4.xml Documents are relatively large, and they are slower to parse and manipulate than other file formats 1 Some 
5. Because the expected data format returned by the server is xml Document, so you need to set it on the server side content-type Type, such as: 
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 Format data; From data " xml Format data " comment Element username The value of the property 
      var username = $(data).find("comment").attr("username");// Follow-up parsing html Documentation similar 
      var content = $(data).find("comment content").text();
      var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
      $("#resText").html(txtHtml); //  Add the returned data to the page 
     });
  })
})
</script>

For more readers interested in jQuery related content, please check the topics of this site: "Summary of jQuery Operation xml Skills", "Summary of jQuery Extension Skills", "Summary of jQuery Common Plug-ins and Usage", "Summary of jQuery Drag Effects and Skills", "Summary of jQuery Table (table) Operation Skills", "Summary of Ajax Usage in jquery", "Summary of jQuery Common Classic Special Effects", "Summary of jQuery Animation and Special Effects Usage" and "Summary of jquery Selector Usage"

I hope this article is helpful to everyone's jQuery programming.


Related articles: