如何將從Ajax請求收到的響應重定向到另一個HTML頁面

Question

我有一個貓鼬數據庫，其中包含一個人的名字和姓氏的數據。 我有一個輸入字段，用戶在其中輸入他們的名字，然后輸入一個ajax請求，該請求將請求發送到文件nameController.js。 該文件中的代碼創建一個JSON響應，其中包含數據庫中所有包含用戶提到的名字的名稱。 我想將此響應重定向到另一個名為responsepage.html的html頁面（而不是index.html），然后將響應顯示為列表。 有誰知道如何做到這一點？

這是我的index.html代碼。

<!DOCTYPE html>
<html>
    <head>
 <meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; style-src 'self' http://* https://* 'unsafe-inline'; script-src 'self' http://* https://* 'unsafe-inline' 'unsafe-eval'">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <script src="js/jquery-3.3.1.min.js"></script>

        <script type="text/javascript" src="js/index.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/6.1.0/jquery.min.js">
        <script src="js/jquery-3.3.1.min.js"></script>

        <title>Hello World</title>
    </head>
    <body>

        Enter your first name: <input id="firstName" name="name" type="text">
        <button id="fnamelistbtn" >Click to see names</button>


    </body>

</html>

這是我的index.js代碼

window.addEventListener("load", startup);
function startup() {
document.getElementById("fnamelistbtn").addEventListener("click", test);
//document.getElementById("el2").addEventListener("input", myFunc);
}

function test(){
alert("tested");
var firstnameneterd=document.getElementById("firstName");
alert(firstnameneterd.value);
var final_url= 'http://localhost:3000/director/cordovanames?name='+firstnameneterd.value;
$.ajax({
  type:'GET',
  //url:'http://localhost:3000/director/cordovanames?name=Vedant',
  url:final_url,
  dataType: "json",
  success: function(response) {
      var jsonparse=JSON.parse(response);
      alert(jsonparse.length);
      for (i = 0; i < jsonparse.length; i++) {
      alert(jsonparse[i].lastName + ', ' + jsonparse[i].firstName);
      }
  },
  error: function(err) {
    alert("not worked");
    alert(err);
    return err;
  }
});

}

這是我的nameController.js代碼

var Name = require('../models/name');
var url = require('url');

exports.cordovanames_list = function(req, res, next) {

  var url_parts = url.parse(req.url, true);
  var query = url_parts.query;
  var fName = query.name;

  Name.find({'firstName': fName})
    .sort([['firstName', 'ascending']])
    .exec(function (err, list_names) {
      if (err) { return next(err); }
      res.json(JSON.stringify(list_names));
    });

};

這是我的responsepage.html代碼

<!DOCTYPE html>
<html>
    <head>

        <meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; style-src 'self' http://* https://* 'unsafe-inline'; script-src 'self' http://* https://* 'unsafe-inline' 'unsafe-eval'">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <script src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script src="js/jquery-3.3.1.min.js"></script>

        <title>Responses</title>
    </head>
    <body>

      <p id="responsepara"></p>


       <script>
       var responsepara = document.getElementById('responsepara');

       function showresponse(response) {
         var jsonparse = JSON.parse(response)
         alert(jsonparse.length);
         for (i = 0; i < jsonparse.length; i++) {
           responsepara.textContent = jsonparse[i].lastName + ', ' + jsonparse[i].firstName;
         }
       }
       </script>

    </body>

</html>

Answer 1

我現在可以想到兩種解決方案。 首先是將響應保存在localStorage或sessionStorage ，然后在下一頁上進行檢索，或者將響應作為GET查詢字符串傳遞到下一頁。

方法1

// index.js
...
success: function(response) {
  var res = JSON.stringify(JSON.parse(response));
  window.localStorage.setItem('response', res);
  window.location = '/response_page.html';
},
...

// response_page.html
...
$(document).ready(function() {
  var response = window.localStorage.getItem('response');
  // Clear storage
  window.localStorage.clear();
  showresponse(response);
});
...

方法二

// index.js
...
success: function(response) {
  var res = JSON.stringify(JSON.parse(response));
  window.location = '/response_page.html?response=' + encodeURIComponent(res);
},
...

// response_page.html
...
$(document).ready(function() {
  var response = window.location.search.split('=')[1];
  showresponse(response);
});
...

方法2的警告是，您最多只能使用2,048個字符。

如何將從Ajax請求收到的響應重定向到另一個HTML頁面

問題描述

1 個解決方案

解決方案1
0 已采納 2018-09-09 03:50:32

如何將從Ajax請求收到的響應重定向到另一個HTML頁面

問題描述

1 個解決方案

解決方案1 0 已采納 2018-09-09 03:50:32

解決方案1
0 已采納 2018-09-09 03:50:32