jquery+ajax加载xml文件到页面

      开发的过程中有时候我们需要把xml文件当做数据库使用,比如留言本,这个时候我们就要对xml进行操作,加载xml文件到页面中,下面就来说说如何通过jquery+ajax实现无刷新的加载xml文件

      xml文件(mes.xml)

     

View Code
<? xml version="1.0" encoding="utf-8"  ?>
< Messages >
   < people >
     < ENName >lishuaibin </ ENName >
     < CNName >李帅斌 </ CNName >
     < message >我叫李帅斌 </ message >
   </ people >
   < people >
     < ENName >zhangxianbo </ ENName >
     < CNName >张三 </ CNName >
     < message >我叫张三 </ message >
   </ people >
   < people >
     < ENName >linsi </ ENName >
     < CNName >林四 </ CNName >
     < message >我叫林四 </ message >
   </ people >
   < people >
     < ENName >jiangwu </ ENName >
     < CNName >姜五 </ CNName >
     < message >我叫姜五 </ message >
   </ people >
   < people >
     < ENName >liuliu </ ENName >
     < CNName >刘六 </ CNName >
     < message >我叫刘六 </ message >
   </ people >
</ Messages >

在页面中ajax加载的代码

 

View Code
<script type="text/javascript">
        $( function () {
            $("#btnXml").click( function () {
                $.ajax({
                    url: "mes.xml",
                    type: "POST",
                    dataType: "xml",
                    success:  function (xml) {
                        $(xml).find("Messages>people").each( function () {
                             var ENName = $( this).find("ENName").text();
                             var CNName = $( this).find("CNName").text();
                             var message = $( this).find("message").text();
                            $("#loadXml").append(ENName+CNName+message+"<br>");
                        })
                     
                    }
                })

            })
        })
    </script>

其中url执行xml文件,DataType为xml,append实现接着填充...

 

 

你可能感兴趣的:(jquery)