Legyen egy kattintás eseményre reagáló script részlet:
$('#savebtn').click(function() { var tasks = new Array(); $('#list li input').each(function(index) { var ready = false; if($(this).is(":checked")) { ready = true; }else { ready = false; } var task = $(this).parent().text(); tasks.push({ task: task, ready: ready }); }); $.post('save.php', { tasks: tasks }) .done(function(){ alert('Mentés megtörtént'); }); });
Megjegyzés: A $.post() függvény nincs benne a Bootstrap mellé terjesztett slim jQuery verzióra.
<?php $tasks = $_POST['tasks']; $jsonFormTaks = json_encode($tasks, JSON_PRETTY_PRINT); file_put_contents('tasks.json', $jsonFormTaks);
$('#loadbtn').click(function() { $.post('load.php', function( data ){ $.each(JSON.parse(data), function(index, obj) { var ready = ''; if(obj['ready'] == 'true') { ready = 'checked'; } var element = '<input type="checkbox" class="mr-2" '+ ready +'>'; $('#list').append('<li class="list-group-item">'+element+ obj['task']+'</li>'); }); }); });
A példában JSON.parse natív függvényt használjuk a tömb értelmezésre. Szokták még ajánlani a $.parseJSON függvényt, de a jQuery 3.0 óta elavultnak számít.
<?php $tasks = file_get_contents("tasks.json"); echo $tasks;