如何实现 OnClick 事件调用 $.getJSON 函数
[英]How to implement OnClick event to call $.getJSON Function
问题描述
I'm working with an Json Data to populate the Html table with it.
我正在使用 Json 数据来填充 Html 表。 The code works fine when I exclude当我排除时，代码工作正常
function getAllDepts()
{
but I would like to insert an button so that it would populate the html table with new JSON Data is availaible and refresh the Table.但我想插入一个按钮，以便它可以使用新的 JSON 数据填充 html 表并刷新表。
But, I nothing is working for me.但是，我没有什么对我有用。
Any Suggestions??有什么建议？？
My Html code is我的 HTML 代码是
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="table-responsive"> <h1>Json</h1> <br/> <table class="table table-bordered table-striped" id="employee_table"> <tr> <th>Class</th> <th>Time</th> </tr> </table> </div> </div> <input id="getAllDepts" type="button" value="Create Table From JSON" /> </body> </html> <script> $(document).ready(function(){ var employee_data= ''; if(localStorage.myJSON !== undefined){ var myJSON = JSON.parse(localStorage.myJSON); employee_data += '<tbody>'; $.each(myJSON, function(key, value){ employee_data += '<tr>'; employee_data += '<td>'+value.class+'</td>'; employee_data += '<td>'+value.time+'</td>'; employee_data += '</tr>'; }); employee_data += '</tbody>'; $('#employee_table').append(employee_data); } employee_data= ''; // empty employee_data $('#getAllDepts').click(function() { $.getJSON("https://api.myjson.com/bins/8qktd", function(data){ $("#yourtableid tbody").remove(); // Empty table before filling it with new data localStorage.setItem(myJSON, JSON.stringify(data)); // Save new data in localStorage $.each(data, function(key, value){ employee_data += '<tr>'; employee_data += '<td>'+value.class+'</td>'; employee_data += '<td>'+value.time+'</td>'; employee_data += '</tr>'; }); $('#employee_table').append(employee_data); }); }) </script>
and another Problem I'm facing is while it is offline ,[ ( of course when I remove function getAllDepts() { ) from there, it runs fine ], On that occasion it populates the table with json data only when Online and when offline it don't work anymore and only column header is shown.我面临的另一个问题是离线时，[（当然，当我从那里删除函数 getAllDepts() { ），它运行良好]，在那种情况下，它仅在在线和离线时使用 json 数据填充表它不再工作，只显示列标题。
My json Data is我的json数据是
[ { "id":"1", "time":"10-15", "class":"John Smith" }, { "id":"2", "time":"10-15", "class":"John Smith" }, { "id":"3", "time":"10-15", "class":"John Smith" }, { "id":"4", "time":"10-15", "class":"John Smith" }, { "id":"5", "time":"10-15", "class":"John Smith" }, { "id":"6", "time":"10-15", "class":"John Smith" }, { "id":"7", "time":"10-15", "class":"John Smith" }, { "id":"8", "time":"10-15", "class":"John Smith" }, { "id":"9", "time":"10-15", "class":"John Smith" }, { "id":"10", "time":"10-15", "class":"John Smith" }, { "id":"11", "time":"10-15", "class":"John Smith" }, { "id":"12", "time":"10-15", "class":"John Smith" } ]
1 个解决方案
解决方案1
1 已采纳 2017-10-14 14:19:54
You could do something like this:你可以这样做：
Wrap your getJSON function with a click listener.使用单击侦听器包装您的 getJSON 函数。 Here is your rewritten script tag:这是您重写的脚本标签：
<script>
$(document).ready(function() {
var employee_data= '';
if(localStorage.myJSON !== undefined){
var myJSON = JSON.parse(localStorage.myJSON);
employee_data += '<tbody>';
$.each(myJSON, function(key, value){
employee_data += '<tr>';
employee_data += '<td>'+value.class+'</td>';
employee_data += '<td>'+value.time+'</td>';
employee_data += '</tr>';
});
employee_data += '</tbody>';
$('#employee_table').append(employee_data);
}
employee_data= ''; // empty employee_data
$('#getAllDepts').click(function() {
$.getJSON("https://api.myjson.com/bins/8qktd", function(data){
$("#yourtableid tbody").remove(); // Empty table before filling it with new data
localStorage.setItem(myJSON, JSON.stringify(data)); // Save new data in localStorage
$.each(data, function(key, value){
employee_data += '<tr>';
employee_data += '<td>'+value.class+'</td>';
employee_data += '<td>'+value.time+'</td>';
employee_data += '</tr>';
});
$('#employee_table').append(employee_data);
});
})
});
</script>
Just add an id to your input element in the HTML element like so:只需在 HTML 元素中的 input 元素中添加一个 id，如下所示：
<input id="getAllDepts" type="button" value="Create Table From JSON" />
Your function is not returning any data when you are offline, because you are making an AJAX request to an URL that is hosted on the internet.当您离线时，您的函数不会返回任何数据，因为您正在向托管在 Internet 上的 URL 发出 AJAX 请求。 Try creating a mock JSON file on your local computer to work with instead if you want to use it offline.如果您想离线使用它，请尝试在本地计算机上创建一个模拟 JSON 文件以供使用。
An easy way to test offline would be to just create your own json file, with whatever data you want.离线测试的一种简单方法是使用您想要的任何数据创建您自己的 json 文件。 For example: you could create a file called test.json and filled it with your own valid JSON data.例如：您可以创建一个名为 test.json 的文件并用您自己的有效 JSON 数据填充它。
Just change your ajax request to point to the local file, instead of the url on the internet.只需将您的 ajax 请求更改为指向本地文件，而不是互联网上的 url。 You could swap these out whenever you wanted.您可以随时更换这些。 Quick example:快速示例：
$.getJSON("data.json", function(data){
Not sure what your directory structure looks like, but you might have to mess around with the path to the json file.不确定您的目录结构是什么样的，但您可能不得不弄乱 json 文件的路径。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.