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

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

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

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

1 个答案: