如何将从 Ajax 请求收到的响应重定向到另一个 html 页面
Posted
技术标签:
【中文标题】如何将从 Ajax 请求收到的响应重定向到另一个 html 页面【英文标题】：How to redirect response received from an Ajax request to another html page 【发布时间】：2019-02-13 21:29:45 【问题描述】：我有一个猫鼬数据库，其中包含一个人的名字和姓氏的数据。我有一个输入字段，用户在其中输入他们的名字，然后是一个将请求发送到文件 nameController.js 的 ajax 请求。此文件中的代码创建一个 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>
【问题讨论】：
你试过本地存储还是GET？ 不，你是怎么做到的？ 我只是想知道如何将响应从 index.html 文件传输到 responsepage.html 文件 【参考方案1】：我现在能想到的问题有两种解决方案。首先是将响应保存在localStorage 或sessionStorage 中并在下一页检索它，或者将响应作为GET 查询字符串传递到下一页。
方法一
// 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 个字符。
【讨论】：
谢谢！我最终做了类似于方法 1 的操作。我将响应保存在 sessionStorage 中并在下一页检索它，它运行良好。以上是关于如何将从 Ajax 请求收到的响应重定向到另一个 html 页面的主要内容，如果未能解决你的问题，请参考以下文章
如何使用位置正则表达式通过 nginx 重定向/处理来自搜索引擎的请求