Question

我的情景如下。

我有一个主网站，其中包含从支持服务检索为JSON的员工列表。我正在使用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，指向包含特定员工所有详细信息的页面。

例如，如果用户点击列表中的“Tom”URL，则应打开一个新的HTML页面，其中包含有关Tom的所有详细信息，包括 FirstName，LastName，BirthPlace，CurrentPlace等。这个简单的页面可以称为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>

现在的问题是如何将特定员工的所有详细信息从main.html页面发送到特定employee.html页面（当点击特定员工的URL时）？

我知道我可以通过网址传递所有参数，但这似乎很难让用户看到这个不必要的详细网址。

还有更好的选择吗？

Answer 1

您可以将其保存到int n; //number of cells. Cells are labeled from 1 to n int num[]; // all the numbers int findMax[]; // findMax[i] equals to the current maximum score for (int i = 0; i<n; i++){ if (i == 0){ findMax[0] = num[0]; } else if (i == 1){ findMax[1]= Math.max(findMax[0],num[1]); } else{ findMax[i]=Math.max(findMax[i-2]+num[i], findMax[i-1]); } return findMax[n];，并在详细信息页面上从本地存储中检索员工信息

你必须对Json进行字符串化，以便将其设置为本地存储（本地存储只保存字符串），然后将其设置为本地存储中的变量，如下所示

localStorage

要检索它，请使用localStorage["employees"] = JSON.stringify(json);将Json解析为和JS Object fron字符串一样

Parse

有关localStorage的更多信息，请查看localStorage - MDN。

Answer 2

使用主页面中的localStorage.setItem("employerList", JSON.stringify(employerData))和deail页面中的var data = JSONparse(localStorage.getItem("employerList"))使用do.call并在数据变量中获取json。

将JS对象从一个HTML页面发送到另一个HTML页面

2 个答案: