如何将从Ajax请求收到的响应重定向到另一个HTML页面

Question

I have a mongoose database that has data containing a person's first and last name. 我有一个猫鼬数据库，其中包含一个人的名字和姓氏的数据。 I have an input field where the user inputs their first name, and then an ajax request that sends the request to the file nameController.js. 我有一个输入字段，用户在其中输入他们的名字，然后输入一个ajax请求，该请求将请求发送到文件nameController.js。 The code in this file creates a JSON response that contains all the names from the database that include the first name that the user mentioned. 该文件中的代码创建一个JSON响应，其中包含数据库中所有包含用户提到的名字的名称。 I would like to redirect this response to another html page (not index.html) called responsepage.html, and then have the response show up as a list. 我想将此响应重定向到另一个名为responsepage.html的html页面（而不是index.html），然后将响应显示为列表。 Does anyone know how to do this? 有谁知道如何做到这一点？

Here is my index.html code. 这是我的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>

Here is my index.js code 这是我的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;
  }
});

}

Here is my nameController.js code 这是我的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));
    });

};

Here is my responsepage.html code 这是我的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

There are two solutions to the problem that I can think of now. 我现在可以想到两种解决方案。 First will be to save the response in localStorage or sessionStorage and retrieve it on the next page, or pass the response to the next page as a GET query string. 首先是将响应保存在localStorage或sessionStorage ，然后在下一页上进行检索，或者将响应作为GET查询字符串传递到下一页。

Method 1 方法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);
});
...

Method 2 方法二

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

The caveat with method 2 is that you are limited to a maximum of 2,048 characters. 方法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