使用JQuery编辑XML文件内容

问题描述:

我得到的XML文件内容使用jQuery和绑定到文本框,如果有人更改文本框中的值,同样必须反映在源XML文件,如何做到这一点,我我是xml的新手。使用JQuery编辑XML文件内容

这是我用来从XML文件中获取数据的代码。

<html><head> 

<link rel="stylesheet" type="text/css" media="all" href="style.css" /> 

<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: "employees.xml", 
      dataType: "xml", 
      success: function(xml) { 
       $(xml).find('Employee').each(function() { 
        var id = $(this).attr('id'); 
        var name = $(this).find('Name').text(); 
        var designation= $(this).find('Designation').text(); 
        //      alert(id + '|' + name + '|' + designation); 
        $('<div class="items" id="' + id + '"></div>').html('<input type="text" value="' + name + '">').appendTo('#page-wrap'); 
       }); 
      } 
     }); 
    }); 
    function saveXMLFiles() { 

     $("#page-wrap").find('id').each(function() { 
      var description = $(this).find('Designation').text(); 
      alert(description); 
     }); 
    } 
</script> 

</head> 
<body> 
<div id="page-wrap"> 
    <h1> 
     Employees</h1> 
</div> 
<input type="button" value="Save" onclick="saveXMLFiles();" /> 

+0

由于JS无法直接向您的服务器写入文件,因此它会在本地下载并使用。您需要将编辑后的JavaScript发送回服务器,并将其保存起来。 – heymega

  1. 首先建立在你的服务器端更新XML的web方法。
  2. 再次,您必须编写一个ajax更新XML的请求。

这完全取决于您的服务器端。

+0

我没有使用任何类型的服务器端,它纯粹是在html文件。有什么办法可以编辑xml吗? – Bilal

+0

@ user3121733从哪里得到的XML文件?在您的本地机器或从任何域? – Praveen

+0

仅限本地机器。 – Bilal

请注意以下几点:

  1. 你必须采取的XML值的变量,它是把所有的功能接近,使得你可以改变它,当有人更改文本框中的值
  2. 将更新的xml的值传递给服务器;

所以要这样做;

<script type="text/javascript"> 
    $(document).ready(function() { 

    var globalXML = null; 

    $.ajax({ 
     type: "GET", 
     url: "employees.xml", 
     dataType: "xml", 
     success: function(xml) { 
      globalXML = xml;//this is going to set in global variable 
      $(xml).find('Employee').each(function() { 
       var id = $(this).attr('id'); 
       var name = $(this).find('Name').text(); 
       var designation= $(this).find('Designation').text(); 
       //      alert(id + '|' + name + '|' + designation); 
       $('<div class="items" id="' + id + '"></div>').html('<input type="text" value="' + name + '">').appendTo('#page-wrap'); 
      }); 
     } 
    }); 
    }); 
    function saveXMLFiles() { 

    $("#page-wrap").find('id').each(function() { 
     var description = $(this).find('Designation').text(); 

     //change to globalXML; 
     //and send it to server; 
     $.ajax({ 
      type: "POST", 
      url: "saveEmployeesToXML",//path to post 
      data: globalXML, 
      success: function(response) { 
      alert(response); 
      } 
     }); 
    } 
}); 
     alert(description); 
    }); 
    } 
</script>