Question

html page

<!DOCTYPE html>
<html lang="en">
<head>
  <title>studentDetails</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

   <div class="container">
        <h3>List Of Students</h3>
      <div id="students">
        <ul id="list" class="list-group">        
        </ul>
      </div>
    </div>
    <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type = "text/javascript" src = "app.js"></script>

</body>
</html>

app.js

$.getJSON('data.JSON',function(data){

    for(var i = 0; i < data['students'].length; i++){

        $('#students').append('<li id="' + data['students'][i]['id'] + '"' + 'class="list-group-item"> <a href="details.html">' + data['students'][i]['name'] + " "+ data['students'][i]['surname'] +'</a></li>' ); 
    }    
});

data.json

{"students":[
   {
      "id":"1",
      "name":"Aaa",
      "surname":"Bbb",
      "standard":"7",
      "age":"10"
   },

   {
      "id":"2",
      "name":"ABc",
      "surname":"Pqr",
      "standard":"7",
      "age":"10"
   }
]}

我正在尝试将从listview中选择的数据传递到另一个页面。

在第一个HTML页面中有一个学生列表＆＃39;我从JSON检索过的名字。

当从listview中选择一名特定学生时，其相应的详细信息应显示在下一页上。

Answer 1

传递数据有多种方法 - 1.作为url参数或表单数据传递给服务器（在任何一种情况下，它都作为请求参数发送）。如果您的选择框位于表单下，并且您使用表单提交导航到下一页，则下一页中将自动显示所选的学生ID。如果它不是表单而您使用链接导航，请将选定的学生ID附加为锚点href的url参数。例如，如果您的页面是studentDetails.do，请将click事件绑定到anchor元素，并将href更改为studentDetails.do?studentId = idof selected student。你可以使用javascript。

保留在客户端浏览器中 - 为此目的使用window.sessionStorage或window.localStorage。一些旧浏览器不支持本地存储和会话存储。在这种情况下，您可以将数据保存为cookie（如果您要传递的对象是一个复杂的对象，使用JSON.stringify对其进行字符串化，然后另存为cookie），尽管为此目的使用cookie（将数据从一个页面传输到next）不建议使用cookie的原始用法是将数据从客户端的服务器保存一段时间或一段有限的时间。

在任何一种情况下，请确保在加载第二页时清除localStorage / sessionStorage / cookie，这样它就不会成为残留物。

如果您需要详细的代码，请告诉我。

Answer 2

也许可以使用localStorage吗？

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

localStorage.setItem('myCat', 'Tom');

根据这个，您将能够通过几个页面传递一些数据/对象。它也非常轻松。

Answer 3

从上面分享的代码中，我理解的是你没有使用表单和html选择，而是从休息调用json响应中动态填充的ul-li元素。现在假设你想要

现在假设您想在单击列表元素时导航到新页面，并从下一页检索学生ID

$(document).on("click" ,"li.list-group-item",function(event){
/// since you are putting the li elements id as student id
window.location.href="new pages url?studentId="+$(this).attr("id"); 
}

这将使页面导航到下一页，在服务器端，您将从request参数获取studentId。如果你的服务器是基于j2ee，例如A jsp，然后你可以使用request.getParameter（）获取学生ID，并将其传递给服务器端应用程序的buiness层API，以从学生ID中检索完整的学生数据。

从列表视图中选择时如何将值传递到另一个页面

3 个答案: