查询字符串到数组然后解析成一个字符串

我的目标是创建一个表单，获取用户信息，然后将其添加到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 &gt;" /> 
     </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>

//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); 
}

来源

2016-11-25 Kane

您可以用此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'];

来源

2016-11-25 21:01:02 trincot

感谢您的回复回到我的身边。直到你花时间回答我的帖子，我才知道Map对象。我仍然试图让这个工作，但你指出我在正确的方向。 – Kane

更新。我得到它的工作。我让变量mp成为一个全局变量，在函数中添加了一个返回值，并且再次检查了我的调用。再次感谢你 – Kane

很高兴听到它为你工作。 – trincot

查询字符串到数组然后解析成一个字符串

回答

相关问题