一个模拟前后台提交的小练习
通过在第一个页面的表单里填写信息并提交,通过第二个页面获取数据并进行解析渲染操作,实现通过输入变量名而呈现对应数据。(两个页面的源码在文章最后)
一、向网址栏传递参数
首先创立一个a.html,这是前端给用户操作提交信息的页面,HTML的代码很简单,这里就不赘述了。
主要实现向地址栏传递参数功能的代码就是HTML中form表单中的action属性,通过get方法可以将参数挂在地址栏后面。
<form action="b.html" method="get">
在action属性里面输入你需要跳转到的页面,也就是获取参数并对参数进行解析渲染的模拟后台页面,这里我传递到的页面是b.html。
对应页面(b.html)?后红色框里面的参数即是前端页面传递的数据,其对应的变量名是由自己定义的。
二、获取地址栏的数据
这部分可以通过JS来实现
方法一
var url = document.location.toString();
var urlParmStr = url.slice(url.indexOf('?')+1);
这两行代码是通过将网址转换成字符串,再通过寻找到?对应的下标来分割传递的数据。
方法二(推荐)
document.location.search
这行代码更简单可以直接获取到地址栏?后传递的数据
三、通过变量名输出数据
变量名是自己定义的,给"点击"按钮添加一个点击事件,获取第一个输入框的值通过循环来匹配对应的变量名,然后再在第二个输入框中输出在前端获取到的数据,具体代码参考b.html的JS部分的源码吧。
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;list-style: none;}
.box{margin: 0 auto;margin-top: 20px; width: 240px; height: 280px; border: 1px solid #000000;}
.box h3{display: flex;justify-content: center;}
.box ul{line-height: 55px;display: flex;justify-content: center;}
.box p{display: flex;justify-content: center;}
.box input{width: 120px;}
</style>
</head>
<body>
<div class="box">
<form action="b.html" method="get">
<h3>旅游景点分布</h3>
<ul>
<li><h4>景点名称</h4></li>
<li><input name="name" type="text"/></li>
</ul>
<ul>
<li><h4>门票价格</h4></li>
<li><input name="price" type="text"/></li>
</ul>
<ul>
<li><h4>景点地址</h4></li>
<li><input name="area" type="text"/></li>
</ul>
<ul>
<li style="margin-right: 15px;"><h4>国家:</h4></li>
<select name="contry" style="width: 125px;height: 23px;margin-top: 16px;">
<option value="泰国">泰国</option>
<option value="马来西亚">马来西亚</option>
<option value="法国">法国</option>
</select>
</ul>
<p>
<button style="width: 115px;height: 25px;background-color: #CACAD9;border: none;">提交</button>
</p>
</form>
</div>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;list-style: none;}
.con{margin: 0 auto;margin-top: 20px; width: 240px; height: 280px; border: 1px solid #000000;}
.con ul{display: flex;justify-content: flex-start;margin-top: 40px;}
.con p{display: flex;justify-content: center;}
.con input{width: 120px;}
</style>
</head>
<body>
<div class="con">
<ul>
<li style="margin:0 5px;"><p>变量名</p></li>
<li><input type="text" id="b1"/></li>
</ul>
<p>
<button onclick="f2()" style="width: 115px;height: 25px;background-color: #CACAD9;border: none;margin-top: 10px;">点击</button>
</p>
<p style="margin: 10px;">
<input type="text" id="b2">
</p>
</div>
</body>
<script type="text/javascript">
// var url = document.location.toString();
// var urlParmStr = url.slice(url.indexOf('?')+1);
var urlParmStr = document.location.search.slice(+1)
var arr = urlParmStr.split('&');
// arr=decodeURI(arr)
console.log(arr[0])
for(let i=0;i<arr.length;i++){
let g=arr[i]
console.log(g)
}
// 获取到输入框
var input=document.querySelector('#b2');
function f2(){
var str=document.getElementById("b1").value;
// console.log(str)
var val;
arr.forEach(function(item,i){
{
let g=item.split('=');
if(g[0]==str){
val=g[1];
// console.log(val)
}
}
})
val=decodeURI(val)
input.value=val;
}
</script>
</html>