html之间传值
2019-04-24 本文已影响0人
Vincy_ivy
我们真的是无所不能，没有学过的语言居然因为web，什么都学了一遍。web的课还是要认真听的，老师讲了好多好多听不懂的函数
实验10
请设计一个提交表单的页面：form.html，可以让用户输入相关的基本信息，如下图1所示。当点击“提交”后，跳转到action.html页面，在action.html页面显示用户提交的相关信息，用表格显示出来，如图2所示。
图1
图2
form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<fieldset >
<legend>提交个人基本信息</legend>
<form action="action.html" onload="action.js" method="get" >
//CARE CARE 这里一定要有name属性 不然在js中无法传值，终于跳出坑的感觉真好
请输入你的用户名<input type="text" name="name" /><br />
请输入你的邮箱地址：<input type="text" name="mail" /><br />
请选择性别<input type="radio" name="sex" value="male" checked/>男
<input type="radio" name="sex" value="female" />女<br />
请选择你的年龄：<input type="number" name="age" /><br />
<input type="submit" value="提交" />
</form>
</fieldset>
</body>
</html>
action.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="action.js" ></script>
</head>
<body onload="showURL()">
</body>
</html>
action.js
function showURL(){
//关键,这里已经全部获取了
var urlStr = location.search;
console.log(urlStr);
urlStr=urlStr.substring(1);
console.log(urlStr);
var urlName = new Array();//用户名
var urlValue = new Array();
var urlArr = new Array();
urlArr = urlStr.split("&");
console.log(urlArr);
for(var i=0;i<urlArr.length;i++){
urlName[i]=urlArr[i].split("=")[0];//等于号左边
urlValue[i]=urlArr[i].split("=")[1];//等于号右边
}
document.write("<table border='1' width='100'>");//创建表格
document.write("<tr>");
for(var j=0;j<urlName.length;j++){
document.write("<th>"+urlName[j]+"</th>")
}
document.write("</tr>");
document.write("<tr>");
for(var m=0;m<urlValue.length;m++){
document.write("<td>"+urlValue[m]+"</td>");
}
document.write("</tr>");
}
