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

Question

我正在为我的作品集构建一个电影库，目前我只有 JSON 数组，其中包含 20 个用于电影标题和摘要等的对象。我该怎么做，当我单击项目时，比如说《自杀小队》，然后比名称出现在 url 中。像这样，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 时，浏览器将停止显示当前页面并加载其他页面。有几种方法可以在不重新加载页面的情况下更改 URL，我将在最后提到。

通常，如果您的数据(如示例中所示)位于名为 movies 的变量中，并且您想要创建带有可点击链接的 A 标记，请在容器标签 movielist，那么你可以这样做:

movies.forEach(function(movie) {
    var link = document.createElement('A');
    link.setAttribute('href', '#' + movie.name.replace(/\W+/g,'_'));
    movielist.appendChildI(link);
});

如您所见，我们通过用下划线替换任何非“单词字符”(基本上是字母数字)的内容来清理 URL 的电影名称。虽然这对于 URL 有效，但它是一种有损转换 - 即无法反转以取回原始值。 @nikhil 建议 - 使用 encodeURIComponent() 是一种无损转换 - 即您可以读回它并获取原始值，尽管它对人眼来说不太漂亮(主要是标准英文文本的问题是它将空格转换为“+”或“%20”)。

此外，您可以看到我在链接 URL 前面添加了“#” - 这意味着我不会完全替换当前 URL，只是替换其“Fragment Identifier”部分。当您更改当前 URL 上的片段标识符时，浏览器不会重新加载页面，而是尝试在页面上查找指定的“文档片段”并滚动到它。由于我们不希望在页面上找到带有电影名称的片段，因此它不会执行任何操作 - 只是在 URL 中显示它(尽管您可能希望使用片段切换和 CSS 做一些有趣的事情， see here )。

另一种无需重新加载页面即可更改 URL 的方法是 History.pushState()，尽管正确处理起来要复杂得多。这对于单页应用程序很有用。 See here for details about pushState() 。作为这种用法的一个例子，当您浏览存储库中的文件时，Github 会使用这种方式，它会快速加载它们，而无需重新加载整个页面，但您仍然可以使用浏览器的“后退”和“前进”按钮进行导航。