Question

JQuery 如何增删改 XML

JQuery 如何增删改 XML

Answer 1

1.通过jquery的$.ajax()请求该xml资源，里面参数dataType:xml，如此，即可在本地js代码上遍历此xml文档。把文件显示于页面。做了修改，删除操作后，把数据用JSON方式传递到后台，进行文件读写操作。
$.ajax({
  url : rootPath + "/xml.php?act=read",
  dataType : "json",
  success : function(response) {
   if (response) {
     alert("保存成功");
   }
    else
     alert("保存失败" );
   }
  }
 });

xml文件\内容读取
1、读取xml文件
$.get("xmlfile.xml",function(xml){
        //xml即为可以读取使用的内容，具体读取见第2点
    });
2、读取xml内容
如果读取的xml是来于xml文件，这结合上面的那点，处理如下
$.get("xmlfile.xml",function(xml){    
        $(xml).find("item").length;    
    });
如果读取的是xml字符串，则要注意一点，xml字符串的必然被”<xml>”和”</xml>”包围才可以被解析
$("<xml><root><item></item></root></xml>").find("item").length; 二、解析xml内容示例xml：<?xml version="1.0" encoding="utf-8" ?><fields>
  <field Name="Name1">
    <fieldname>dsname</fieldname>
    <datatype>字符</datatype>
  </field>
  <field Name="Name2">
    <fieldname>dstype</fieldname>
    <datatype>字符</datatype>
  </field></fields>以下是解析示例代码$(xml).find("field").each(function() {
       var field = $(this);
 var fName = field.attr("Name");//读取节点属性
 var dataType = field.find("datatype").text();//读取子节点的值
});

另外说明一点js是没有权限去直接操作本地或者服务器的xml文件的，要通过 ActiveX来实现，这个涉及到浏览器安全的。

Answer 2

一、通过异步操作读取到xml文件，在本地遍历xml或者修改，删除节点，然后形成json传输程序后台进行处理。

 var strHTML = ""; //初始化保存内容变量
                $.ajax({
                    url: 'Xml/7-5.xml',
                    dataType: 'xml',
                    success: function(data) {
                        var $strUser = $(data).find("User");
                        strHTML += "编号：" + $strUser.attr("id") + "<br>";
                        strHTML += "姓名：" + $strUser.children("name").text() + "<br>";
                        strHTML += "性别：" + $strUser.children("sex").text() + "<br>";
                        strHTML += "邮箱：" + $strUser.children("email").text() + "<hr>";
                        $("#Tip").html(strHTML); //显示处理后的数据
                    }
                });
                
//-------拼接xml字符串，然后传入后台进行相应处理（增、删、改）

 

二、    本地读取+ajax异步更新

1、读取xml文件

$.get("xmlfile.xml",function(xml){
    //xml即为可以读取使用的内容，具体读取见第2点
});

//或者
$.get("xmlfile.xml",function(xml){    
    $(xml).find("item").length;    
});

如果读取的是xml字符串，则要注意一点，xml字符串的必然被”<xml>”和”</xml>”包围才可以被解析

$("<xml><root><item></item></root></xml>").find("item").length;

2、解析xml内容示例xml：

<?xml version="1.0" encoding="utf-8" ?>
<fields>
  <field Name="Name1">
    <fieldname>dsname</fieldname>
    <datatype>字符</datatype>
  </field>
  <field Name="Name2">
    <fieldname>dstype</fieldname>
    <datatype>字符</datatype>
  </field>
</fields>

以下是解析示例代码

$(xml).find("field").each(function() {
    var field = $(this);
    var fName = field.attr("Name");//读取节点属性
    var dataType = field.find("datatype").text();//读取子节点的值
});

 

修改节点的值

function setNodeValue(node, value){
    var textNodes = getTextNodes(node);
    if (textNodes.get(0)){
    textNodes.get(0).nodeValue = value;
    }
    else {
        node["textContent"] = value;
    }
}

3、本地修改后xml文档数据后通过ajax异步保存数据