• Szerző: Sallai András
• Copyright © Sallai András, 2020
• CC Attribution-Share Alike 4.0 International
• Web: http://szit.hu

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.

save.php

<?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.

load.php

<?php
 
$tasks = file_get_contents("tasks.json");
echo $tasks;