1
私が持っているシナリオは次のとおりです。JSオブジェクトをあるHTMLページから別のHTMLページに送信する
バッキングサービスからJSONとして取得された従業員のリストを持つメインWebサイトがあります。私はテンプレート用にHandlebarsエンジンを使用していますが、それは以下のように見えます。
JSON
[{"FirstName":"Tom","LastName":"Stephens","BirthPlace":"London","Gender":"M","OIB":"12345678901","CurrentPlace":"Berkeley","Department":"21510"},
{"FirstName":"Abigail","LastName":"Ybarra","BirthPlace":"Miami","Gender":"F","OIB":"12345678902","CurrentPlace":"Los Angeles","Department":"21540"},
{"FirstName":"Kim","LastName":"Kardashian","BirthPlace":"New York","Gender":"F","OIB":"12345678903","CurrentPlace":"Boston","Department":"UNKNOWN"},
{"FirstName":"David","LastName":"Beckham","BirthPlace":"London","Gender":"M","OIB":"12345678904","CurrentPlace":"Manchester","Department":"UNKNOWN"},
{"FirstName":"Zlatan","LastName":"Ibrahimovic","BirthPlace":"Stockholm","Gender":"M","OIB":"12345678905","CurrentPlace":"Zenica","Department":"21540"}]
index.htmlを
<script id="employees-template" type="text/x-handlebars-template">
<ul>
{{#each employees}}
<li>{{FirstName}}</li> <!-- use URL to a details website instead of FirstName -->
{{/each}}
</ul>
</script>
は、従業員のリストは、次のように定義されたボタンをクリックし、上フェッチされています。
main.js
// on-click listener
$("#btn-show").click(function(e) {
// AJAX call on button clicked
$.ajax({
type: "GET",
dataType: "json",
url: "http://127.0.0.1:8080/api/employee/",
error: function (xhr) {
console.log(xhr.statusText);
}
}).done(function(data) {
// render data to html template
var html = template({employees : data});
$("#render-here").html(html);
});
});
これには、次のように動作します。ボタンがクリックされたときに、従業員名のリストがレンダリングされます。
ここで達成したいのは、これらの名前のそれぞれが実際に特定の従業員に関するすべての詳細を含むページにつながるURLであることです。
たとえば、ユーザがリスト内のURL「Tom」をクリックすると、FirstName、LastName、BirthPlace、CurrentPlaceなどを含むTomに関するすべての詳細を含む新しいHTMLページが開きます。この単純なページはemployee.htmlと呼ぶことができます。
employee.html
<html>
<head>
</head>
<body>
<p>
Firstname: {{FirstName}}
</p>
<p>
LastName: {{LastName}}
</p>
<p>
CurrentPlace: {{CurrentPlace}}
</p>
<p>
BirthPlace: {{BirthPlace}}
</p>
<p>
Gender: {{Gender}}
</p>
<p>
Department: {{Department}}
</p>
</body>
</html>
質問は、私は特定の従業員のためのURLをクリックすると、特定のemployee.htmlページ（に私のmain.htmlページから特定の従業員のためのすべての詳細を送信することができますどのようになりましたに）？
私はすべてのパラメータをURL経由で渡すことができますが、実際にはこの不必要な詳細なURLを見ることは実際には醜いと思われます。
もっと良い選択肢はありますか？
データを文字列化して[localstorageに追加する]ことができます（https://developer.mozilla.org/en/docs/Web/API/Window/localStorage）。注：サイズの制限があります。 – Andy
私はあなたがangularjsを使用していると信じています。なぜサービスを利用しないのですか？ – Hacker