在按钮单击时附加 JSON 值
Posted
技术标签:
【中文标题】在按钮单击时附加 JSON 值【英文标题】：Append JSON Values on button click 【发布时间】：2019-08-12 23:10:25 【问题描述】：我想我在这里遗漏了一些东西。 此 Jquery Mobile Web 应用程序用于查看特定城市的停车场信息。
基本上，应用程序正在加载、解析 JSON 数据，然后将其附加到页面上。然后是一个文本框输入和一个按钮。基于文本框输入，它只显示与文本框输入中指定的相同数量的停车位的数据。基本上是根据用户指定的停车位数量查看停车场信息。 我让它有点工作，但附加数据的方法在按钮单击时不起作用。只有当我在本地浏览器上刷新页面时，它才会加载与文本框对应的值。我不希望这样，并且希望在单击按钮时更新列表。
JSONparkingLots.JSON 的一部分
"lotList":[
"id":1,
"lotName":"Jarvis St \/ Carleton St",
"availableSpots":8,
"totalSpots":15
]
main.js
var lotData;
$(document).ready(function()
$.getJSON(
url: "parkingLots.json",
mimeType: "application/json",
success: parseParkingLotsJSON
);
);
function parseParkingLotsJSON(data)
lotData = data.lotList;
for (var i=0; i < lotData.length; i++)
$("#size").append(appendLot(lotData[i], i));
;
function appendLot(lotData)
var lotName = lotData.lotName;
var lotId = lotData.id;
var lotAmount = lotData.availableSpots;
var key = $("#sizeId").val();
var size = $("<div " + lotId + "' data-role='table'>");
if ( lotAmount == key )
size.append("<h1>" + lotName + "</h1>");
size.append("<p> Lot ID: " + lotId + "</p>");
size.append("<p> Spots: " + lotAmount + "</p>");
return size;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parking Lot Web</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="main.css" />
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.31"></script>
<script src="main.js"></script>
</head>
<h1>Parking Lot App</h1>
<body class="ui-page-theme-a">
<div data-role="page" id="home">
<h1 class="center">Parking App</h1>
<ul>
<a data-role="button" href='#page1'>Group Size</a>
</ul>
</div>
<div id="page1" data-role="page" data-filter="true" class="center">
<!--Where it's displayed on page-->
<h1 class="center" data-role="content">Search by Lot Size</h1>
<input type = "text" id = "sizeId"/>
<input type = "button" id = "sizeBtn" value = "search" onclick="appendLot(lotData)"/>
<div id="size" data-role="table" class="center"></div>
</div>
</div>
</body>
</html>
如果您有任何建议或有办法让我能够在单击按钮时加载数据而不必刷新，我将不胜感激。
【问题讨论】：
此应用程序是否尝试加载数据，将其绑定到页面，然后根据可用插槽上的匹配搜索批次？ 是的，它应该只显示与用户指定的停车位数量相同的地段的数据。 prntscr.com/n191sf 这就是我想要它做的事情。它显示有 8 个可用停车位的停车场信息，如文本框中指定的那样。唯一的问题是我只能通过刷新此页面来获得此结果。当我单击按钮时，列表不会更新，只能通过刷新来更新。我想让它在点击搜索按钮时工作。 【参考方案1】：这与appendLot 方法访问lotData 的方式有关。批次数据是一个数组，所以需要通过索引来访问。
var lotName = lotData[0].lotName;
另一个问题是使用=== 将lotAmount 与key 进行比较。为了确保它们是数字，可以使用parseInt() 方法。
lotData 不需要传递给 appendLot 方法，因为它可用于整个 main.js。
为了仅获取第一个匹配的元素并将其附加到 size 元素作为概念证明，可以像这样设置批次变量：
function appendLot()
var lotName = lotData[0].lotName;
var lotId = lotData[0].id;
var lotAmount = lotData[0].availableSpots;
var key = $("#sizeId").val();
var size = $('#size');
if ( parseInt(lotAmount, 10) === parseInt(key, 10) )
size.append("<h1>" + lotName + "</h1>");
size.append("<p> Lot ID: " + lotId + "</p>");
size.append("<p> Spots: " + lotAmount + "</p>");
要将所有匹配的批次附加到 size 元素，可以使用与上述类似的逻辑循环 lotList 数组。
function appendLot()
var size = $('#size');
for (var i = 0; i < lotData.length; i++)
var lotAmount = lotData[i].availableSpots;
var key = $("#sizeId").val();
if ( parseInt(lotAmount, 10) === parseInt(key, 10) )
size.append("<h1>" + lotData[i].lotName + "</h1>");
size.append("<p> Lot ID: " + lotData[i].id + "</p>");
size.append("<p> Spots: " + lotAmount + "</p>");
如果您有任何其他问题，请告诉我。希望对您有所帮助。
【讨论】：
谢谢，最后一个区块就快到了！现在它在按钮单击时附加，但每次单击按钮时它都会继续添加到页面上。您知道清除信息以换取新信息的方法吗？例如：当我在搜索栏中输入 7 时，会出现包含 7 个地点的地段信息。但是假设我在搜索栏中输入 8，我希望包含 8 个位置的地段的地段信息能够显示在视图中。 不客气。在添加新匹配之前需要清除 size 元素。看看这个问题：***.com/questions/1701973/…。接受的答案下方的答案应该可以帮助您入门。 :) 您也可以在这里查看以供参考：api.jquery.com/empty 完美！非常感谢您的所有帮助！我真的很感激。以上是关于在按钮单击时附加 JSON 值的主要内容，如果未能解决你的问题，请参考以下文章
单击按钮时附加新文本字段并通过单击 Laravel 4 中的按钮删除
JQuery - 单击切换按钮时，附加表会不断增加自身或复制自身