MNX*_*024 5 html javascript xml
这是我班上的作业.我需要做的是创建一个注册页面.当用户按下提交按钮时,我已获取表单上的所有信息并使用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文档中的某些信息可能没有正确的措辞,所以希望你们不要介意.此外,我还需要稍后通过将秘密问题的答案放在后面来修复我的XML.
好的,非常感谢你们.
UPDATE!
在这里,我终于想出了如何使用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文件.这是我完全不知道该怎么做的地方.一些指针会很好.
顺便说一句,我的教授故意没有教我们如何做到这一点,因为他希望我们自己研究它.
哪个应该给你一个关于更深入搜索的提示.无论如何,我不打算对每一行发表评论,但我会提供一些提示.
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
这是Microsoft专有的创建XML文档的方式,它通常包含在try..catch中,因为在不同版本的IE中提供了不同的ActiveXObject.你还需要寻找document.implementation.createDocument.
//DEFINE LOAD METHOD
function LoadXML(xmlFile)
{
xmlDoc.load(xmlFile);
您可能想要查看async参数.
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++;
使用plain 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;
}
}
不要在警报中一次显示一条警报消息,而应考虑将它们放在与其相关的元素相邻的文档中.这样,用户可以在修复错误时看到messaeg.
问我们这不是作弊吗？您的实现可能只能在 IE 中工作，我建议使用 jQuery，因为它在解析 XML 方面非常强大。
我不知道他为什么要你写出 XML，因为它来自 JavaScript 不太直观。你可以通过 jQuery 做这样的事情
//I capture form submitevent
$('form').submit(function( ev ){
ev.preventDefault(); //I keep form from submitting
$( xmlDocument ).find('Person').attr({
username: $("input[name=usrname]),
password: $("input[name=pswd]),
//and so on
});
});
如何“报告”此 xml 文件取决于您
| 归档时间： |
|
| 查看次数： |
81805 次 |
| 最近记录： |