[[oktatas:web:jquery|< jQuery]]

====== jQuery és a PHP ======
  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2020
  * [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: http://szit.hu

===== Lista átadása PHP scriptnek =====

Legyen egy kattintás eseményre reagáló script részlet:

<code JavaScript>
$('#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');
    });
});
</code>

Megjegyzés: A $.post() függvény nincs benne a Bootstrap mellé terjesztett
slim jQuery verzióra.


==== PHP script átveszi az adatokat ====

<code php save.php>
<?php

$tasks = $_POST['tasks'];

$jsonFormTaks = json_encode($tasks, JSON_PRETTY_PRINT);
file_put_contents('tasks.json', $jsonFormTaks);

</code>

===== Adatok átvétele PHP kódból =====

<code JavaScript>
$('#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>');
        });
    });
});

</code>

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 script átadja az adatokat ====

<code php load.php>
<?php

$tasks = file_get_contents("tasks.json");
echo $tasks;

</code>