HTML页面之间通过GET方法传递表单数据

发表于： 2020年1月21日 2020年1月21日
分类：编程笔记

在做一些调查页面时我们经常会用到表单，我们按下提交按钮后，表单就会提交到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>

如图，按下提交按钮后就可以在新页面中可以看到刚才填写的姓名、年龄和密码。

提交页面