gpt4 book ai didi

javascript - 如何使用 Javascript 将 HTML 表单中的数据写入 XML

转载 作者:太空狗 更新时间:2023-10-29 15:47:21 25 4
gpt4 key购买 nike

这是我类的作业。我需要做的是创建一个注册页面。当用户按下提交按钮时,我已获取表单上的所有信息并使用 Javascript 将其写入现有的 XML 文件。这是在客户端完成的,只能通过 HTML、Javascript 和 XML。顺便说一句,我的教授故意不教我们怎么做,因为他要我们自己研究。另外,我不太熟悉 Javascript,尤其是内置函数,如果可能请解释每一行或代码方法的作用。

让我开始吧,这是我现有的 XML 的样子:

    <?xml version ="1.0" encoding="utf-8" ?>
<!--GGFGFGFVBFVVVHVBV-->
<PersonInfo>
<Person Usrname="Bob111" Pswd="Smith111" personid="111" FirstName="Bob" LastName="Smith" DOB="01/01/1960" Gender="M" Title="Hello1">
</Person>
<!-- several more lines of <person> here -->
</PersonInfo>

保存表单数据时,必须遵循里面的所有布局,基本上我会需要Usrname、Pswd、personid等。

基本上,据我所知,一旦我按下提交,我就必须从我的注册页面创建 XML 行“Person”。然后将它推送到已经有我的 XML 信息的数组中,然后用数组上的信息覆盖我的 XML 文档。我的问题是,我完全不知道该怎么做。

对于那些想知道我的注册页面是什么样子的人,这里是:

    <html>

<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="CSS_LABs.css" />
</head>


<body>

<div class="form">
<form id="Registration" action="" method="get">

Username:<input type="text" name="usrname" maxlength="10"/> <br/>
Password:<input type="password" name="pswd" maxlength="20"/> <br/>

<hr>

PersonID:<input type="text" name="PID" /> <br>

<hr>

First Name:<input type="text" name="fname"/> <br>
Last Name:<input type="text" name="lname"/>

<hr>

DOB:<input type="text" name="dob" /> <br>

<hr>

Gender:<input type="text" name="sex" /> <br>

<hr>

Title:<input type="text" name="title" /> <br>

<hr>

Secret Question:<br>
<select name="secret?">
</select> <br>

Answer:<input type="text" name="answer" /> <br> <br>

<input type="submit" value="submit" />
</form>
</div>

</body>

</html>

顺便说一句,我知道我的 HTML 文档中的某些信息可能措辞不当,希望大家不要介意。此外,我还必须稍后通过将 secret 问题的答案放入其中来修复我的 XML。

好的,非常感谢你们。

更新!!!

我们开始吧,我终于想通了如何使用 Javascript 创建 XML 文档,这是代码:

    var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var FILENAME = 'G:\\CST2309 - Web Programming 1\\Copy of Take Home Exam - Copy\\PersonXML2.xml';

function SaveXML(UserData)
{
var file = fso.CreateTextFile(FILENAME, true);
file.WriteLine('<?xml version="1.0" encoding="utf-8"?>\n');
file.WriteLine('<PersonInfo>\n');

for (countr = 0; countr < UserData.length; countr++) {
file.Write(' <Person ');
file.Write('Usrname="' + UserData[countr][0] + '" ');
file.Write('Pswd="' + UserData[countr][1] + '" ');
file.Write('PersonID="' + UserData[countr][2] + '" ');
file.Write('FirstName="' + UserData[countr][3] + '" ');
file.Write('LastName="' + UserData[countr][4] + '" ');
file.Write('Gender="' + UserData[countr][5] + '" ');
file.Write('DOB="' + UserData[countr][6] + '" ');
file.Write('Title="' + UserData[countr][7] + '"');
file.WriteLine('></Person>\n');
} // end for countr

file.WriteLine('</PersonInfo>\n');
file.Close();

} // end SaveXML function --------------------

function LoadXML(xmlFile)
{
xmlDoc.load(xmlFile);
return xmlDoc.documentElement;
} //end function LoadXML()

function initialize_array()
{
var person = new Array();
var noFile = true;
var xmlObj;
if (fso.FileExists(FILENAME))
{
xmlObj = LoadXML(FILENAME);
noFile = false;
} // if
else
{
xmlObj = LoadXML("PersonXML.xml");
//alert("local" + xmlObj);
} // end if

var usrCount = 0;
while (usrCount < xmlObj.childNodes.length)
{
var tmpUsrs = new Array(xmlObj.childNodes(usrCount).getAttribute("Usrname"),
xmlObj.childNodes(usrCount).getAttribute("Pswd"),
xmlObj.childNodes(usrCount).getAttribute("PersonID"),
xmlObj.childNodes(usrCount).getAttribute("FirstName"),
xmlObj.childNodes(usrCount).getAttribute("LastName"),
xmlObj.childNodes(usrCount).getAttribute("Gender"),
xmlObj.childNodes(usrCount).getAttribute("DOB"),
xmlObj.childNodes(usrCount).getAttribute("Title"));
person.push(tmpUsrs);
usrCount++;
} //end while
if (noFile == false)
fso.DeleteFile(FILENAME);
SaveXML(person);
} // end function initialize_array()

这里的代码所做的是,它获取我的原始 XML 文件并将其加载到一个数组中,以便它可以创建一个新的 XML 文件。基本上我已经完成了创建 XML 文件的部分,但我的其余部分仍然需要帮助。

我的目标是尝试获取我的表单数据并将其推送到我现有的数组中,而不是覆盖它,添加它,这样我就可以用新的注册信息更新我现有的 XML 文件。这是我完全不知道该怎么做的地方。一些指示会很好​​。

最佳答案

By the way, my Professor purposely did not teach us how to do this because he wants us to research on it by ourselves.

这应该会提示您进行更深入的搜索。无论如何,我不会对每一行 进行评论,但我会提供一些提示。

 var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

这是创建 XML 文档的 Microsoft 专有方法,它通常包含在 try..catch 中,因为不同版本的 IE 中提供了不同的 ActiveXObject。您还需要查找 document.implementation.createDocument

    //DEFINE LOAD METHOD
function LoadXML(xmlFile)
{
xmlDoc.load(xmlFile);

您可能需要查看异步参数。

     xmlObj = xmlDoc.documentElement;
}

//declare & initialize array
var arrPerson = new Array();

使用数组文字被认为是更好的做法:... = [];

    //initialize array w/ xml
function initialize_array()
{
LoadXML("PersonXML.xml");
var x = 0;
while (x < xmlObj.childNodes.length)

在每个循环中获取 xmlObj.childNodes 的长度是低效的,请考虑存储长度并与该值进行比较。

    {
var tmpArr = new Array(xmlObj.childNodes(x).getAttribute("Usrname"),
xmlObj.childNodes(x).getAttribute("Pswd"),
xmlObj.childNodes(x).getAttribute("FirstName"),
xmlObj.childNodes(x).getAttribute("LastName"),
xmlObj.childNodes(x).getAttribute("DOB"),
xmlObj.childNodes(x).getAttribute("Gender"),
xmlObj.childNodes(x).getAttribute("Title"));

重复访问 xmlObj.childNodes(x) 是非常低效的。存储引用并重复使用。

        arrPerson.push(tmpArr);

您可以将值直接分配给 arrPerson 并删除 tmpArr

        x++;   

使用普通的 for 循环将为您递增 x。

    }
}

//Validation
function LogInVal(objtxt)
{
if(objtxt.value.length == 0)
{
objtxt.style.background = "red";
return 1;
}

else
{
objtxt.style.background = "white";
return 0;
}
}

并非所有浏览器都允许您设置输入元素的背景颜色样式。

    //main validation
function MainVal(objForm)
{
var errmsg = "empty field";
var errmsg2 = "Incorrect Username and Password";

您可能需要一种更好的方法来命名错误消息并将它们与该消息的其他信息相关联。一个对象可能会完成这项工作。

        var msg = "You have logged in successfully";
var errCount = 0;

var usrn = document.getElementById("usrname1").value;
var pswd = document.getElementById("pswd1").value;

errCount += LogInVal(objForm.usrname);
errCount/*1*/ += LogInVal(objForm.pswd);

initialize_array();

if (errCount != 0)
{
alert(errmsg);
return false;
}
else if(authentication(usrn, pswd) == true)

函数 authentication() 返回 true 或 false,所以你不需要将它与任何东西进行比较,你可以只测试返回值(即不需要 = = true 上面)。

        {

alert(msg);
return true;
setCookie('invalidUsr',' ttttt');
}
else
{
alert(errmsg2);
return false;
}
}

与其在警报中一次显示一条警报消息,不如考虑将它们放在文档中与它们相关的元素附近。这样用户就可以在修复错误时看到消息。

关于javascript - 如何使用 Javascript 将 HTML 表单中的数据写入 XML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6066837/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com