Question

我的目标是创建一个获取用户信息的表单，然后将其添加到url查询字符串中。查询字符串信息将被拉回到一个数组中，然后作为文本显示在第二页上。我被困在最后一部分，获取数组并将其作为文本放在段落元素中。在从数组中获取查询数据之间的某个地方，问题就发生了。

我尝试将其转换为String（）;将javascript插入span元素。在浏览器检查器中，我的数组值确实存在。

HTML Page 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>

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

Answer 1

您可以使用此ES6脚本将URL参数转换为Map：

var mp = new Map(queryData.split("&").map( s => s.split('=') ));
document.getElementById('newtext').textContent = mp.get('fname') + ' ' + mp.get('lname');

在ES5中，您可以使用普通对象而不是Map：

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'];

将字符串查询到数组然后解析为字符串

1 个答案: