我们如何添加 url 参数? (EJS + 节点 + 快递)
how do we add url parameters? (EJS + Node + Express)
我了解我们如何解析 快速路线中的 url 参数,如示例
How to get GET (query string) variables in Express.js on Node.js?
但是 url 参数首先来自哪里?
编辑:
显然,我可以使用 jquery(即 $.get
)构建这样的查询。我可以将 params
附加到此查询对象。这很酷,但我仍然试图了解我们如何在呈现整个页面的查询中实现这一点。
一个例子:当我选择下面的最旧选项卡时,SO如何将?answertab=oldest
添加到url 所以它变成了:
您正在查看的字符串是表单值的序列化,或其他类似的数据输入方法。要了解这一点,请查看 jQuery's built in .serialize() method。
您也可以手动构造该字符串,这也非常简单。格式只是 ?var1=data1&var2=data2
等。如果你有一个 JSON 对象 {"name": "Tim", "age": 22}
那么你可以编写一个非常简单的函数来序列化这个对象:
function serializeObject(obj) {
var str = "?";
for(var i = 0; i < Object.keys(obj).length; i++) {
key = Object.keys(obj)[i];
if (i === Object.keys(obj).length - 1)
str += encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
else
str += encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]) + "&";
}
return str;
}
运行 seralizeObject({"name": "Tim", "age": 22})
将输出 '?name=Tim&age=22'
。这可用于生成 link 或诸如此类的东西。
页面作者是这样写的。他们就是这样写的"come in the first place"。 HTML 页面的作者决定(或由网站设计者告知)当用户点击页面上的特定锚元素时将用户带到哪里。 如果他们希望用户 GET
带有一些查询参数(由他们的服务器处理)的页面,他们只需将他们选择的查询字符串添加到 link 的 href
属性.
查看您单击的 最旧 选项卡的 href
属性:
<a
class="youarehere"
href="/questions/30516497/how-do-we-add-url-parameters-ejs-node-express?answertab=oldest#tab-top"
title="Answers in the order they were provided"
>
oldest
</a>
当您单击它时,浏览器会将您带到 href
属性 /questions/30516497/how-do-we-add-url-parameters-ejs-node-express?answertab=oldest#tab-top
中相对于基础 URL http://whosebug.com
指示的路径。所以地址栏变了。
whosebug.com 可能有自己的生成动态 HTML 页面的系统。他们的管理员和页面作者已经将他们的服务器配置为处理特定的查询参数,并已采用他们自己的方法来确保他们页面上的 links 指向他们希望的 URL(包括查询字符串) .
您需要向模板系统提供带有您选择的查询字符串的 URI(您可以使用 url.format and querystring.stringify 构建它们)以进行呈现。然后让您的快速路由处理它们并根据它们的值生成页面。
我了解我们如何解析 快速路线中的 url 参数,如示例
How to get GET (query string) variables in Express.js on Node.js?
但是 url 参数首先来自哪里?
编辑:
显然,我可以使用 jquery(即 $.get
)构建这样的查询。我可以将 params
附加到此查询对象。这很酷,但我仍然试图了解我们如何在呈现整个页面的查询中实现这一点。
一个例子:当我选择下面的最旧选项卡时,SO如何将?answertab=oldest
添加到url 所以它变成了:
您正在查看的字符串是表单值的序列化,或其他类似的数据输入方法。要了解这一点,请查看 jQuery's built in .serialize() method。
您也可以手动构造该字符串,这也非常简单。格式只是 ?var1=data1&var2=data2
等。如果你有一个 JSON 对象 {"name": "Tim", "age": 22}
那么你可以编写一个非常简单的函数来序列化这个对象:
function serializeObject(obj) {
var str = "?";
for(var i = 0; i < Object.keys(obj).length; i++) {
key = Object.keys(obj)[i];
if (i === Object.keys(obj).length - 1)
str += encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
else
str += encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]) + "&";
}
return str;
}
运行 seralizeObject({"name": "Tim", "age": 22})
将输出 '?name=Tim&age=22'
。这可用于生成 link 或诸如此类的东西。
页面作者是这样写的。他们就是这样写的"come in the first place"。 HTML 页面的作者决定(或由网站设计者告知)当用户点击页面上的特定锚元素时将用户带到哪里。 如果他们希望用户 GET
带有一些查询参数(由他们的服务器处理)的页面,他们只需将他们选择的查询字符串添加到 link 的 href
属性.
查看您单击的 最旧 选项卡的 href
属性:
<a
class="youarehere"
href="/questions/30516497/how-do-we-add-url-parameters-ejs-node-express?answertab=oldest#tab-top"
title="Answers in the order they were provided"
>
oldest
</a>
当您单击它时,浏览器会将您带到 href
属性 /questions/30516497/how-do-we-add-url-parameters-ejs-node-express?answertab=oldest#tab-top
中相对于基础 URL http://whosebug.com
指示的路径。所以地址栏变了。
whosebug.com 可能有自己的生成动态 HTML 页面的系统。他们的管理员和页面作者已经将他们的服务器配置为处理特定的查询参数,并已采用他们自己的方法来确保他们页面上的 links 指向他们希望的 URL(包括查询字符串) .
您需要向模板系统提供带有您选择的查询字符串的 URI(您可以使用 url.format and querystring.stringify 构建它们)以进行呈现。然后让您的快速路由处理它们并根据它们的值生成页面。