生成可以编辑xml的html
时间: 2023-10-09 22:05:32 浏览: 76
要在HTML中生成可编辑的XML,需要使用JavaScript和XML DOM(文档对象模型)。
首先,您需要在HTML中包含一个XML文件:
```html
<!DOCTYPE html>
<html>
<head>
<title>可编辑的XML</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>可编辑的XML</h1>
<div id="xmlEditor"></div>
<script>
// 将XML文件加载到div中
$(document).ready(function(){
$.ajax({
type: "GET",
url: "example.xml",
dataType: "xml",
success: function(xml){
$(xml).find('root').each(function(){
var xmlText = $(this).html();
$('#xmlEditor').html('<textarea id="xmlTextArea" rows="10" cols="50">' + xmlText + '</textarea>');
});
}
});
});
</script>
</body>
</html>
```
这将使用jQuery加载一个名为“example.xml”的XML文件,并将其显示在一个textarea元素中,使其可编辑。
接下来,您需要使用JavaScript将XML数据保存回服务器:
```html
<!DOCTYPE html>
<html>
<head>
<title>可编辑的XML</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>可编辑的XML</h1>
<div id="xmlEditor"></div>
<br>
<button id="saveButton">保存</button>
<script>
// 将XML文件加载到div中
$(document).ready(function(){
$.ajax({
type: "GET",
url: "example.xml",
dataType: "xml",
success: function(xml){
$(xml).find('root').each(function(){
var xmlText = $(this).html();
$('#xmlEditor').html('<textarea id="xmlTextArea" rows="10" cols="50">' + xmlText + '</textarea>');
});
}
});
});
// 保存XML数据
$('#saveButton').click(function(){
var xmlData = $('#xmlTextArea').val();
$.ajax({
type: "POST",
url: "save.php",
data: {
xmlData: xmlData
},
success: function(response){
alert(response);
}
});
});
</script>
</body>
</html>
```
在这个例子中,我们添加了一个“保存”按钮,并使用jQuery的click()方法来处理单击事件。当用户单击“保存”按钮时,我们获取textarea元素中的XML数据,并将其作为数据发送到名为“save.php”的服务器端脚本。在该脚本中,您可以将XML数据保存到文件或数据库中。
请注意,由于涉及到服务器端代码,因此您需要在服务器上运行此代码才能生效。
阅读全文