Question

我正在为我的作品集构建一个电影库，目前我只有JSON数组，其中有20个对象用于电影片头和摘要等。我怎么能这样做，当我点击项目时，让我们说自杀小队，而不是要在网址中显示的名称。像这样，http://localhost:63342/Movie/title_of_the_movie

在js或jquery中这样做会很好。

[
{
"name": "Godzilla",
"year": 1998,
"releaseDate": "20 May 1988",
"runtime": "2h 19mm",
"director": "Roland Emmerich",
"screenplay": "Dean Devlin and  Roland Emmerich",
"cast": {
  "Matthew Broderick": "Dr.Niko Tatopolous",
  "Jean Reno": "Philipe Roache",
  "Maria Pitillo": "Audrey Timmonds",
  "Hank Azaria": "Victor 'Animal' Palotti",
  "Kevin Dunn": "Colonel Hicks",
  "Michael Lerner": "Mayor Ebert",
  "Harry Shearer": "Charles Caiman",
  "Arabella field": "Lucy Palotti",
  "Vicki Lewis": "Dr.Elsie Chapman",
  "Doug Savant": "Sergeant O'Neal"
},
"castPhoto": {},
"imdb": 5.3,

"boxOffice": "$130,000,000 ",
"openingWeekend": "$55,726,951"
}
]

Answer 1

请注意，通常在您更改网址时，浏览器将停止显示您当前的网页，并会加载其他网页。有几种方法可以在不重新加载页面的情况下更改URL，最后我会提到。

通常，如果您在名为movies的变量中拥有数据（如示例中所示），并且您想在容器标记{{1}中创建带有要点击的链接的A标记那么你可以这样做：

movielist

正如您所看到的，我们通过用下划线替换不是“单词字符”（基本上是字母数字）的任何内容来清理URL的电影名称。虽然这对URL有效，但它是一个有损变换 - 即它无法反转以恢复原始值。 @nikhil所建议的 - 使用movies.forEach(function(movie) { var link = document.createElement('A'); link.setAttribute('href', '#' + movie.name.replace(/\W+/g,'_')); movielist.appendChildI(link); });是一种无损变换 - 即你可以读回它并获得原始值，虽然它对人眼来说不那么漂亮（标准英文文本的问题主要是它将空格转换为“encodeURIComponent()”或“+”）。

此外，您可以看到我在链接网址前加上“%20” - 这意味着我不会完全替换当前网址，只是替换“Fragment Identifier”部分。当您更改当前URL上的片段标识符时，浏览器不会重新加载页面，而是尝试在页面上查找指定的“文档片段”并滚动到该页面。因为我们不期望在页面上找到带有电影名称的片段，所以它什么也不做 - 只需在URL中显示它（尽管你可能想要通过片段切换和CSS做see here）。

在不重新加载页面的情况下更改URL的另一种方法是，#正确处理它要复杂得多。这对单页面应用程序很有用。 See here for details about pushState()。作为这种用法的一个例子，这就是Github在浏览存储库中的文件时使用它并快速加载它们而无需重新加载整个页面，但您仍然可以使用浏览器的“后退”和“前进”按钮进行导航。 / p>

如何从数组中的JSON对象获取属性值，并在url中写入

1 个答案: