HTML页面之间通过GET方法传递表单数据
在做一些调查页面时我们经常会用到表单,我们按下提交按钮后,表单就会提交到action属性设置的地址中,传送的方法一般有2种,分别是GET和POST。这篇文章介绍了使用GET方法提交表单到另一个页面的简单例子。
表单页面(index.html)源代码如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html"; charset="utf-8" /> <title>发送页面</title> </head> <body> <h1 align="center">这是一个表单</h1> <form action="index2.html" name="test" method="GET" enctype="application/x-www-form-urlencoded"> <table align="center"> <tr> <td> 姓名: <input name="name" type="text" size="15"/> <br> 年龄: <input name="age" type="text" size="15" maxlength="3"> <br> 密码: <input name="password" type="password" size="15" maxlength="6"> </td> </tr> <tr> <td align="center"> <input type="submit" name="tijiao" value="提交"> <input type="reset" name="cz" value="重置"> </td> </tr> </table> </form> </body> </html>
注意:这里为了演示方便,采用GET方法提交带密码的数据,在实际情况下不能使用GET方法提交敏感信息,否则会导致信息泄露。
接收页面(index2.html)源代码如下:
<!DOCTYPE HTML> <html"> <head> <meta http-equiv="content-type" content="text/html"; charset="utf-8" /> <title>接收页面</title> <script language="javascript"> function getPar(par) { var local_url = decodeURI(document.location.href); //此处是一位CSDN博主的代码 var get = local_url.indexOf(par + "="); if(get == -1) { return ""; } var get_par = local_url.slice(par.length + get + 1); var nextPar = get_par.indexOf("&"); if(nextPar != -1) { get_par = get_par.slice(0, nextPar); } return get_par; } </script> </head> <body> <script> document.write('姓名:<h1>'+getPar('name')+'</h1>'); document.write('年龄:<h1>'+getPar('age')+'</h1>'); document.write('密码:<h1>'+getPar('password')+'</h1>'); </script> </body> </html>
如图,按下提交按钮后就可以在新页面中可以看到刚才填写的姓名、年龄和密码。
本文版权归逸云蓝天所有,转载请注明出处并添加本文链接。