简单实现页面提交数据
本次会用到两个html和两个js文件
html部分
index页面
<head>
<style>
button,
input {
color: grey;
}
table {
border: 1px solid #a9a9a9;
padding: 3px;
}
tr,
td {
border: 1px solid #a9a9a9;
padding: 5px;
}
</style>
<script src="Frm.js"></script>
</head>
<body>
<form id="form1">
<table align="center">
<h4 align="center">push the data</h4>
<tr>
<td>ID</td>
<td><input type="text" name="userid" placeholder="enter the ID"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" name="username" placeholder="enter the name"></td>
</tr>
<tr>
<td>gender</td>
<td>
<input type="radio" name="sex" value="male">male
<input type="radio" name="sex" value="gemale">female
</td>
</tr>
<tr>
<td></td>
<td>
<!-- <input type="button" value="submit" onclick="submitFrm()"> -->
<input type="button" value="submit" onclick="submitFrm()">
<input type="reset" value="reset">
</td>
</tr>
</table>
</form>
<form id="form2">
<table align="center">
<h4 align="center">url push dada</h4>
<tr>
<td>ID</td>
<td><input type="text" id="userid1" placeholder="enter the ID"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="username1" placeholder="enter the name"></td>
</tr>
<tr>
<td>gender</td>
<td>
<input type="radio" name="ssex" value="male">male
<input type="radio" name="ssex" value="female">female
</td>
</tr>
<tr>
<td>file</td>
<td><input type="file" id="myfile"></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="submit" onclick="send()">
<input type="reset" value="reset">
</td>
</tr>
</table>
</form>
</body>get页面
<script src="get.js">
var frmValue = window.location.search;
frmValue = decodeURIComponent(frmValue);
</script>js部分
接下来到了本次作业的难点，涉及到的js逻辑对初学者来说有点复杂
Frm.js
function submitFrm() {
var objFrm = document.getElementById("form1");
console.log(objFrm);
objFrm.method = "get";
objFrm.action = "get.html";
objFrm.submit();
// form表单自带提交函数，只需定义提交方式和目的地址
}
function send() {
var sid = document.getElementById("userid1").value;
var nname = document.getElementById("username1").value;
var ssex = document.getElementsByName("ssex");
var filevalue = document.getElementById("myfile").value;
var index1 = filevalue.lastIndexOf(".");
var fileExt = filevalue.substring(index1 + 1);
var index2 = filevalue.lastIndexOf("\\");
var fileName = filevalue.substring(index2 + 1, index1);
var sex;
for (var i = 0; i < ssex.length; i++) {
if (ssex[i].checked)
sex = ssex[i].value;
// 获取性别的值
}
// 通过url方式提交页面数据
var URL = "get.html?id=" + sid + "&name=" + nname + "&sex=" + sex + "&fileName : " + fileName + "&FileExt : " + fileExt;
window.location.href = URL;
// 动态输出跳转
}
get.js
window.onload = function () {
var frmValue = window.location.search;
frmValue = decodeURIComponent(frmValue);
// 解码当前搜索到的url对象
frmValue = frmValue.substring(1);
// 解码后首个字符是?，用过字串切割来去除?
var urlValue = frmValue.split("&");
// 以&号作为分割，分割成若干个字串
for (var i = 0; i < urlValue.length; i++) {
var nname = urlValue[i].split("=")[0];
var Vvalue = urlValue[i].split("=")[1];
// 对等号前后进行切割
if (Vvalue != null)
document.write(nname + " : " + Vvalue + "<br>");
else {
document.write(nname + "<br>");
}
// 如果Vvalue部分是空的话，说明nname部分是文件命名部分，因为没有=，所以所有内容都在nname部分
}
}