JavaScript程序基础(十二)网址传递参数编码综合案例

下面,介绍一个JavaScript内置编码函数的应用示例。
在表单get提交中,对url参数的处理示例。
首先,来看一个网址示例:

http://www.abc.com/a.jsp?user=admin&pwd=123

这是表单get方式提交的结果。
其中,用户名和密码以明文传输(user=admin,pwd=123),且可能存在歧义,为解决这个问题,我们结合上一节JavaScript内置函数对其编码,为处理这类问题提供一种思路。

一、网址传递参数编码综合案例
1.新建一个文件夹myweb,作为网站目录。
2.在myweb网站目录下,设计制作index.html网页,效果如图所示:
JavaScript程序基础(十二)网址传递参数编码综合案例_第1张图片

示例代码:

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
@charset "utf-8";
/* CSS Document */
body{font-size:18px; font-family:"微软雅黑"; background:url(images/timg.jpg) no-repeat top center; color:#FFF;}       
form,p{ padding:0; margin:0; border:0;}   /*重置浏览器的默认样式*/
form{
	width:420px;
	height:200px;
	padding-top:60px;
	margin:250px auto;                      /*使表单在浏览器中居中*/
	background:rgba(255,255,255,0.1);    /*为表单添加背景颜色*/
	border-radius:20px;
	border:1px solid rgba(255,255,255,0.3);
} 
p{
	margin-top:15px; 
	text-align:center;
 } 
p span{
	width:60px;
	display:inline-block; 
	text-align:right;
	} 
.num,.pass{                /*对文本框设置共同的宽、高、边框、内边距*/ 
	width:165px; 
	height:18px; 
	border:1px solid rgba(255,255,255,0.3);
    padding:2px 2px 2px 22px; 
	border-radius:5px;
	color:#FFF;
	} 
.num{             /*定义第一个文本框的背景、文本颜色*/
	background:url(images/3.png) no-repeat 5px center rgba(255,255,255,0.1);
    } 
.pass{            /*定义第二个文本框的背景*/
    background: url(images/4.png) no-repeat 5px center rgba(255,255,255,0.1);
     }
.btn01{
	width:190px; 
	height:25px; 
	border-radius:3px;       /*设置圆角边框*/ 
	border:2px solid #000; 
	margin-left:65px;
	background:#57b2c9;
	color:#FFF;
	border:none;
	}   
style>
head>
<body>
<form method="get" onsubmit="return encode()">	
  <p>
    <span>账号:span>
    <input type="text" name="username" id="username" class="num" />
  p>
  <p>
    <span>密码:span>
    <input type="password" name="pwd" id="pwd" class="pass" />
  p>
  <p>
    <input type="submit" class="btn01" value="登录"/>
  p>
form>
<script>
     function encode(){
           var strUser=document.getElementById('username').value;
           var strPwd=document.getElementById('pwd').value;
           var parameter='username='+strUser+'&pwd='+strPwd;
           window.location.href=escape('result.html')+'?'+escape(parameter);
           return false;
     }
script>
body>
html>

所用图片素材:
1在这里插入图片描述
2在这里插入图片描述
3JavaScript程序基础(十二)网址传递参数编码综合案例_第2张图片

3.在myweb网站目录下,设计制作result.html网页,作为登陆后网页,显示参数信息。效果如图所示:
JavaScript程序基础(十二)网址传递参数编码综合案例_第3张图片

示例代码:

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script>
    document.write("网址参数:
"
); document.write(unescape(location.href));
script> body> html>

写在结束:这里问题的处理还有很多方法,比如post方式加密等等。这里仅为训练内置函数的用法提供示例。

你可能感兴趣的:(javascript,javascript,前端,html)