发送带有 json 的 html 文件并让浏览器重新加载该 json 而无需重新加载页面

Posted 2023-03-08

【中文标题】发送带有 json 的 html 文件并让浏览器重新加载该 json 而无需重新加载页面

【英文标题】：Sending an html file with json AND having the browser reload that json without reloading page

【发布时间】：2017-05-09 00:56:39

【问题描述】：

我正在尝试编写一个浏览器服务器程序，其中浏览器将 http get 发送到“http://localhpost:3000/param=something”。服务器应该返回一个 html 页面和一个 json。我尝试使用 res.render() 我将 json 作为参数传递（它是一个数组）但渲染不起作用。这是我在 app.js 中的代码：

app.use(express.static(path.join(__dirname, 'public')));
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

这里是响应 http 请求的 index.js：

router.get('/:screen', function(req, res, next) 
var arr = Array();
res.render('main.html',  playlist : arr );
);

我得到的错误是： 错误：找不到模块“html”

现在，即使这样可行，我仍然必须以某种方式每分钟从服务器获取更新的 json（数组）无需重新加载页面。我成功地部分完成了访问存储在共享库中的主 json（数组）并使用 ajax 加载它的地方。这行得通，但是程序需要获取与原始 http get 中发送的“屏幕”参数相关的子 json。 为了做到这一点，我需要一种方法让服务器重新计算原始子 json 并将其重新发送给我，而无需重新加载页面。

至于研究和我尝试过的事情： 问题 1：我在这个网站上进行了很多搜索，发现了一些对我不起作用的解决方案。这可能是版本问题或其他任何我没有注意的问题，但我已经做了所有我应该做的更改，以便让'render()' 在 html 上工作。我只是不断收到这个错误。 问题 2：正如我已经解释过的，我找到了一种获取原始 json 的方法，但无法弄清楚如何获取子 json。这是 main.html 中的代码（无论参数 'screen' 作为原始 get 请求的一部分，它都会被发回）：

$.get("http://localhost:3000/ads.js", function(data, status)
    playlist = JSON.parse(data);
);

我非常感谢任何有关这些问题的帮助。

注意：我将这两个问题包含在同一个问题中，因为它们相互关联。这两个请求都应该让服务器计算一个子 json 并发送它。一个请求会将其作为 html 文件的一部分发回，而另一个请求将加载到该页面而不重新加载整个页面。解决其中一个问题会直接影响另一个问题，因此我选择将它们都包含在此处。

【问题讨论】：

在一个请求中，来自服务器的响应可以是 HTML 或 JSON - 你不能在一个响应中同时做这两个 - 好吧，你可以，但它不是真的是 html 或 json，它只是 data 必须在客户端处理

json 不必单独发送。我试图使用 'render()' 将它与 html 页面一起发送，以便它可以作为变量添加到页面中。只要能在浏览器的html页面访问，所有方法都有效。

【参考方案1】：

好吧，这就是我解决所有这些问题的方法：

至于 render() 函数，我了解到您需要以某种方式更改视图引擎，所以我没有使用它。 相反，我使用“sendFile()”将主 html 文件发送到所有站点。在那个 html 文件中，我包含了 ajax 请求（它阻止了网站重新加载）。我将“url”设置为“window.location.href”，其中包含所需的参数。 在服务器端，我使用单独的函数来处理请求。一个发送回主 html 文件，另一个使用 url 中的参数计算 sub-json 并将其发送回用户。