AJAX 原生js以及Jquery解析html,xml,txt,json格式文本

以你之姓@ 2022-06-08 04:39 277阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td><font> &nbsp;&nbsp;&nbsp;面向对象面向君，不负代码不负卿。 *^o^* </font> </td> 
  </tr> 
 </tbody> 
</table>

**原生js解析HTM文件,txt文件**

ajax/ajax1.js

text/ajax1.html

<a href="aaa.html">hello world</a>

ajax1.jsp

显示效果

<a href="text/ajax1.html"><a href="aaa.html">hello world</a></a>

**jquery解析HTML文件，txt文件**

ajax\_jqurey/ajax-html-jquery.js

$(function(){ 
       $('a').click(function(){ 
         var url  = this.href+" a" ;//当前路径下 并且选择a标签
         var args = {
       "time":new Date()} ;//时间戳 (JSON格式)
         $("#h3").load(url,args) ;//load 将内容直接加入到 id = h3 下
         return false ;//取消a标签的默认行为
       });
     })

ajax-html-jquery.jsp

<a href="text/ajax-html-jquery.html">ajax-html-jquery</a>
        <a href="text/ajax-html-jquery2.html">ajax-html-jquery2</a>
        <h3 id="h3"></h3>

text/ajax-html-jquery.html

<h2><a href="#">我是a</a></h2>
    <span>sdadjk</span>
    <a>ppp</a>

**原生js解析xml**

ajax/ajax2.js

ajax2.jsp

<a href="text/1.xml">xml解析1</a> <a href="text/2.xml">xml解析2</a> <div id="div1"></div>

text/1.xml

<?xml version="1.0" encoding="UTF-8"?>
    <person>
        <name>乐乐</name>
        <age>20</age>
        <garde>中</garde>
        <specialty>音乐</specialty>
    </person>

text/2.xml

<?xml version="1.0" encoding="UTF-8"?>
    <person>
        <name>八戒</name>
        <age>10</age>
        <garde>低</garde>
        <specialty>结界</specialty>
    </person>

**jquery解析xml**  
ajax\_jqurey/ajax-xml-jquery.js

$(function(){ 
       $('a').click(function(){ 
         var url  = this.href ;
         var args = {
       "time":new Date()} ;
         //post将get改为post即可
         //function:回掉函数 当响应结束时被触发 响应结果在data中
         $.get(url,args,function(data){ 
           var name = $(data).find("name").text() ;//将data包装成一个jqurery对象 调用find() 再调用text()获取name下的文本值
           var age = $(data).find("age").text() ;
           var garde = $(data).find("garde").text() ;
           var specialty = $(data).find("specialty").text() ;
           $("#h3").empty().append(""+name+"<a href='"+garde+".html'>"+garde+"</a>").append("age:"+age+"").append(""+specialty+"") ;
    
         }) ;
         return false ;
       });
     })

ajax2.jsp

<a href="text/1.xml">xml解析1</a>
      <a href="text/2.xml">xml解析2</a>
      <div id="div1"></div>

text/1.xml

<?xml version="1.0" encoding="UTF-8"?>
    <person>
        <name>乐乐</name>
        <age>20</age>
        <garde>中</garde>
        <specialty>音乐</specialty>
    </person>

text/2.xml

<?xml version="1.0" encoding="UTF-8"?>
    <person>
        <name>八戒</name>
        <age>10</age>
        <garde>低</garde>
        <specialty>结界</specialty>
    </person>

**原生js解析json**  
ajax/json.js

text/json1.json

{
       "person":{
            "name":"无先",
            "age":10,
            "garde":"差",
            "specialty" :"吉他"   
            }   
    }
    text/json2.txt
    {
       "person":{
            "name":"丽丽",
            "age":16,
            "garde":"高" ,
            "specialty":"音乐"    
            }   
    }

json.jsp

**jquery解析json**

ajax\_jqurey/ajax-json-jquery.js

$(function(){ 
       $('a').click(function(){ 
         var url  = this.href ;
         var args = {
       "time":new Date()} ;
         //post将get改为post即可
         //function:回掉函数 当响应结束时被触发 响应结果在data中
         $.getJSON(url,args,function(data){ //返回的data直接就是一个json对象
           var name = data.person.name ;
           var age = data.person.age ;
           var garde =data.person.garde ;
           var specialty = data.person.specialty ;
           $("#h3").empty().append(""+name+"<a href='"+garde+".html'>"+garde+"</a>").append("age:"+age+"").append(""+specialty+"") ;
    
         }) ;//如果用get不用getJson此处写为},"JSON") ; 同样是可以的
         return false ;
       });
     })

text/json1.json

{"person":{ "name":"无先", "age":10, "garde":"差", "specialty" :"吉他" } }

text/json2.txt

{"person":{ "name":"丽丽", "age":16, "garde":"高" , "specialty":"音乐" } }

json.jsp

<table> 
 <tbody> 
  <tr> 
   <td><font> &nbsp;&nbsp;&nbsp;大牛，别默默看了。快登陆帮我评论吧！ *^o^* </font> </td> 
  </tr> 
 </tbody> 
</table>