Cum să apelezi o funcție PHP cu Ajax când utilizatorul face click pe un buton

Question

Cum să apelezi o funcție PHP cu Ajax când utilizatorul face click pe un buton

8 sept. 2018, 01:12:19

Vizualizări: 42.3K

Voturi: 6

Dezvolt un site WordPress folosind template-uri/teme personalizate, dar întâmpin dificultăți. Vreau să folosesc Ajax pentru a apela o funcție când un utilizator face click pe un buton. Pe o pagină, am un buton astfel:

<p class='form-submit'>
        <input name='message_read' type='submit' class='submit button mark-as-read' value= 'Mark as read' />
    </p>

Și am o funcție jQuery/Ajax astfel:

jQuery(document).ready(function() { 
   jQuery(".mark-as-read").click(function () {
    console.log('The function is hooked up');
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'mark_message_as_read',
        },
        success: function (output) {
           console.log(output);
        }
        });
    });
});

Funcția de mai sus se află în wp-content/themes/my-theme/js/wp_ajax_calls.js. Am adăugat scriptul pe site astfel:

1) Am adăugat asta în fișierul functions.php:

wp_enqueue_script(  'ajax calls', get_template_directory_uri() .'/js/wp_ajax_calls.js', array('jquery'), '1.0', true);

2) Am inclus scriptul în header.

<script type="text/javascript" src="https://mysite//wp-content/themes/twentyfifteen/js/wp_ajax_calls.js"></script>

Când fac click pe buton, declarația console.log apare. Din câte înțeleg, vreau ca funcția mea ajax să apeleze o funcție php care îmi va permite să folosesc $wpdb. Am asta în functions.php:

function mark_message_as_read() {
    global $wpdb;
    // execută operațiuni
}

Aici încep să mă încurc. Am două întrebări principale:

1) Cred că ar trebui să am niște add_action() undeva, dar nu știu unde să le pun și de asemenea nu știu ce hook ar trebui să folosesc.

2) În plus, vreau să pot transmite date (id-ul mesajului) către funcția php pentru interogarea bazei de date. Cum pot transmite un argument acelei funcții?

Nu vreau să folosesc ceva de genul if( isset($_POST['message_whatever']) ) twentyfifteen_message_whatever(); din cauza modului în care am configurat mesajele.

Sunt dispus să ofer mai multe informații dacă este necesar. Mulțumesc anticipat pentru ajutor!!

ellen

345

ajax wpdb

Comentarii

Vă rugăm să consultați documentația.

Jacob Peattie

8 sept. 2018 07:59:17

Toate răspunsurile la întrebare

Comentarii

Mulțumesc foarte mult! Cu siguranță o să mă uit și la nonces. :D

ellen

8 sept. 2018 18:44:49

Mike 574 · Accepted Answer · 2018-09-08T09:03:38Z

Creează o temă copil (child theme) pentru a nu modifica codul temei existente, deoarece la următoarea actualizare a temei, riscați să pierdeți toate modificările (vezi Teme Copil)

Iată cum poți transmite valori către cererea ta ajax:

jQuery(document).ready(function() { 
   jQuery(".mark-as-read").click(function () {
    console.log('Funcția este conectată');
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'mark_message_as_read',
            // adaugă parametrii tăi aici
            message_id: $('.your-selector').val()
        },
        success: function (output) {
           console.log(output);
        }
        });
    });
});

Poți face și o cercetare despre Nonces, pentru a adăuga un strat de securitate aplicației tale: https://codex.wordpress.org/WordPress_Nonces

În final, codul PHP pentru a gestiona cererea (și aici ar trebui să gestionați nonce-ul în codul real):

// înregistrează acțiunea ajax pentru utilizatorii autentificați
add_action('wp_ajax_mark_message_as_read', 'mark_message_as_read');

// înregistrează acțiunea ajax pentru utilizatorii neautentificați
add_action('wp_ajax_nopriv_mark_message_as_read', 'mark_message_as_read');

// gestionează cererea ajax
function mark_message_as_read() {
    $message_id = $_REQUEST['message_id'];

    // adaugă logica ta aici...

    // la final, returnează date json de succes
    wp_send_json_success([/* unele date aici */]);

    // sau, în caz de eroare, returnează date json de eroare
    wp_send_json_error([/* unele date aici */]);
}