查询字符串到数组然后解析成一个字符串
问题描述:
我的目标是创建一个表单,获取用户信息,然后将其添加到URL查询字符串。查询字符串信息将被拉回到数组中,然后作为文本显示在第二页上。我被困在最后一部分,将数组作为文本放在段落元素中。在从数组中查询数据之间的某处发生问题。查询字符串到数组然后解析成一个字符串
我试过把它转换为toString();将JavaScript插入到span元素中。在浏览器检查器中,我的数组值存在。
HTML页1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Site</title>
<link rel="stylesheet" href="styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<h1>Test Site</h1>
<form action="thankyou.htm" autocomplete="on">
<fieldset class="text" id="fs1">
<label for="name">First Name</label>
<input type="text" id="fName" name="fName" />
<label for="name">Last Name</label>
<input type="text" id="lName" name="lName" />
<label for="email">Email</label>
<input type="email" id="email" name="email" />
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" />
</fieldset>
<fieldset class="btn">
<input type="submit" id="nextBtn" value="Next >" />
</fieldset>
</form>
<script src="scripts.js"></script>
</body>
</html>
HTML页2
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Site</title>
<link rel="stylesheet" href="styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<h1>Thank You</h1>
<p> Hello <span id="newtext"></span> it is nice to meet you</p>
<script src="scripts.js"></script>
</body>
</html>
JS
//GLOBAL VARIABLES
var queryArray = [];
//FUNCTIONS
function addQuery(){
//Concatenate values to query string
var savedData = "?fname=" +
document.getElementById("fName").value;
savedData += "&lname" +
document.getElementById("lName").value;
savedData += "&email" +
document.getElementById("email").value;
savedData += "&phone" +
document.getElementById("phone").value;
location.href = "index.htm" + savedData;
}
function populateInfo(){
if(location.search){
var queryData = location.search;
queryData = queryData.substring(1, queryData.length);
queryArray = queryData.split("&");
}
}
var yourname = queryArray;
document.getElementById("newtext").innerHTML = yourname;
//EVENT LISTENERS
//adds Query only upon submit else causes refresh error
if(window.addEventListener){
window.addEventListener("submit", addQuery, false);
} else if(window.attachEvent){
window.attachEvent("onsubmit", addQuery);
}
//adds query string into array for more uses
if (window.addEventListener){
window.addEventListener("load", populateInfo, false);
}else if (window.attachEvent) {
window.attachEvent("onload", populateInfo);
}
答
您可以用此ES6脚本转换URL参数为Map
:
var mp = new Map(queryData.split("&").map(s => s.split('=')));
document.getElementById('newtext').textContent = mp.get('fname') + ' ' + mp.get('lname');
在ES5你可以使用一个普通的对象,而不是一个地图:
var mp = queryData.split("&").reduce(function(o, s) {
var p = s.split('=');
o[p[0]] = p[1];
return o;
}, {});
document.getElementById('newtext').textContent = mp['fname'] + ' ' + mp['lname'];
感谢您的回复回到我的身边。直到你花时间回答我的帖子,我才知道Map对象。我仍然试图让这个工作,但你指出我在正确的方向。 – Kane
更新。我得到它的工作。我让变量mp成为一个全局变量,在函数中添加了一个返回值,并且再次检查了我的调用。再次感谢你 – Kane
很高兴听到它为你工作。 – trincot