我有一个mongoose数据库，其中包含一个人的名字和姓氏。我有一个输入字段，用户输入他们的名字，然后是一个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>
我现在可以想到这个问题有两个解决方案。首先是在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个字符。