如何使用Javascript将HTML表单数据输出到XML文件？ [英] How to output HTML form data to a XML file using Javascript?
本文介绍了如何使用Javascript将HTML表单数据输出到XML文件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正试图弄清楚如何将我的HTML表单数据输出到XML文件。这是我过去几天一直在玩的一个想法，目的是为了创建一个autounattended.xml文件以用于Windows 7安装。
当前我的HTML如下：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // EN http://www.w3.org/TR/html4/loose.dtd\">
< html>
< head>
< title> Windows 7应答文件生成器< / title>
< / head>
< body>
< form>
< h1> Windows 7应答文件生成器< / h1>
< h2>常规设置< / h2>
< table>
< tr>
< td width =200px>跳过产品密钥：< / td>
< td>
< select name =SkipProductKey>
< option value =是selected =selected>是< / option>
< option value =No>否< / option>
< / select>
< / td>
< / tr>
< tr>
< td width =200px>跳过自动启动：< / td>
< td>
< select name =SkipAutoActivation>
< option value =是selected =selected>是< / option>
< option value =No>否< / option>
< / select>
< / td>
< / tr>
< / table>
< / body>
< / html>
这只是我一直在努力的一小部分。所以，我想知道是否可以使用JavaScript来创建基于选择值的XML文件并询问用户保存xml文件的位置。任何有关这方面的信息都将是一个很大的帮助。
演示这里 $ b $（function （）{
$（'＃DownloadButton'）。click（update）;
}）;
var template = [
'<？xml version =1.0？>'，
'< unattend xmlns =urn：schemas-microsoft-com：无人参与>'，
'...'，
'< SkipProductKey><？SkipProductKey？>< / SkipProductKey>'，
'...'，
'< SkipAutoActivation><？SkipAutoActivation？>< / SkipAutoActivation>'，
'...'，
'< / unattend>'
] .join （ '\r\\\
'）;
函数update（）{
var variables = {$ b $'SkipProductKey'：$（'＃SkipProductKey'）。val（），$ b $'SkipAutoActivation'：$ （'#SkipAutoActivation'）。val（）
};
var newXml = template.replace（/< \？（\ w +）\？> / g，
函数（match，name）{
return变量[名称];
}）;
$（'＃ResultXml'）。val（newXml）;
$（'＃DownloadLink'）
.attr（'href'，'data：text / xml; base64，'+ btoa（newXml））
.attr（'download'，' autounattended.xml'）;
$（'＃generated'）。show（）;
}
if（！window.btoa）{
//源：http://www.koders.com/javascript/fid78168FE1380F7420FB7B7CD8BAEAE58929523C17.aspx
btoa =函数（输入）{
var chars ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 + / =';
var result ='';
var chr1，chr2，chr3;
var enc1，enc2，enc3，enc4;
var i = 0;
do {
chr1 = input.charCodeAt（i ++）;
chr2 = input.charCodeAt（i ++）;
chr3 = input.charCodeAt（i ++）;
enc1 = chr1>> 2;
enc2 =（（chr1& 3）<< 4）| （chr2>> 4）;
enc3 =（（chr2& 15）<< 2）| （chr3>> 6）;
enc4 = chr3& 63;
if（isNaN（chr2））{
enc3 = enc4 = 64;
} else if（isNaN（chr3））{
enc4 = 64;
result + = chars.charAt（enc1）+ chars.charAt（enc2）+ chars.charAt（enc3）+ chars.charAt（enc4）;
} while（i< input.length）;
返回结果;
};
}
编辑： $ b
- 添加了从OP请求的下载按钮。
- 添加了
download- 点击链接以显示另存为 -dialog。 （谢谢Saurabh） - 演示已更新。
I'm currently trying to figure out how to output my HTML form data to an XML file. This is an idea I've been playing around with for the past couple of days in order to create a autounattended.xml file to be used with Windows 7 installations.
Currently my HTML is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Windows 7 Answer File Generator</title>
</head>
<body>
<form>
<h1>Windows 7 Answer File Generator</h1>
<h2>General Settings</h2>
<table>
<tr>
<td width="200px">Skip product key:</td>
<td>
<select name="SkipProductKey">
<option value="Yes" selected="selected">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr>
<td width="200px">Skip automatic activation:</td>
<td>
<select name="SkipAutoActivation">
<option value="Yes" selected="selected">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
</table>
</body>
</html>
This is just a snippet of what I've been working on. So, I was wondering if its possible to use javascript to create an XML file based on the select values and ask the user where to save the xml file. Any information regarding this would be a big help.
解决方案
$(function () {
$('#DownloadButton').click(update);
});
var template = [
'<?xml version="1.0"?>',
'<unattend xmlns="urn:schemas-microsoft-com:unattend">',
'...',
'<SkipProductKey><?SkipProductKey?></SkipProductKey>',
'...',
'<SkipAutoActivation><?SkipAutoActivation?></SkipAutoActivation>',
'...',
'</unattend>'
].join('\r\n');
function update() {
var variables = {
'SkipProductKey': $('#SkipProductKey').val(),
'SkipAutoActivation': $('#SkipAutoActivation').val()
};
var newXml = template.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
$('#ResultXml').val(newXml);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(newXml))
.attr('download', 'autounattended.xml');
$('#generated').show();
}
if (!window.btoa) {
// Source: http://www.koders.com/javascript/fid78168FE1380F7420FB7B7CD8BAEAE58929523C17.aspx
btoa = function (input) {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
var result = '';
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
do {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
result += chars.charAt(enc1) + chars.charAt(enc2) + chars.charAt(enc3) + chars.charAt(enc4);
} while (i < input.length);
return result;
};
}
Edit:
- Added the download-button as requested from OP.
- Added the
download-attribute to the link to show the Save As-dialog when clicked. (Thanks Saurabh) - Demo updated.
这篇关于如何使用Javascript将HTML表单数据输出到XML文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
