Caricare contenuti in un div con AJAX

Question

Caricare contenuti in un div con AJAX

21 dic 2016, 10:31:57

Visualizzazioni: 15.6K

Voti: 1

Per favore dammi un consiglio, sono molto nuovo con AJAX. Ho una lista di post e quando clicco su uno vorrei visualizzare le informazioni del post in un div senza ricaricare la pagina. So che devo usare AJAX, quindi ho creato un file: loadcontent.php nella cartella root e ho usato questo codice qui sotto, ma non so come inviare e ricevere dati tramite AJAX. Devo passare un ID per ottenere le informazioni del post.

<script>
   $(document).ready(function(){
    
    $.ajaxSetup({cache:false});
        $(".post-link").click(function(){
        var post_id = $(this).attr("rel"); //questo è l'ID del post
        $("#post-container").html("caricamento contenuto...");
        $("#post-container").load("/loadcontent.php");
       return false;
    });

  });
</script>

Yoona

39

post ajax

Tutte le risposte alla domanda

Commenti

Ciao, ho un errore nella console: my apiurl non è definito

Yoona

21 dic 2016 11:29:25

Sai quale potrebbe essere il problema? Grazie per la tua risposta.

Yoona

21 dic 2016 11:36:04

Questo perché JS non ha myapiurl nel suo scope... La tua richiesta ajax funziona?

Kaeles

21 dic 2016 12:06:50

Ti consiglio di leggere questo documento: https://codex.wordpress.org/AJAX_in_Plugins La mia soluzione è la più semplice, ma non la migliore. Leggi attentamente questa documentazione e non avrai più problemi con le richieste Ajax in WordPress.

Kaeles

21 dic 2016 12:12:40

Prova a sostituire 'myapiurl' con 'ajaxurl'. Sembra essere l'URL predefinito fornito da WordPress.

Kaeles

21 dic 2016 12:16:26

Mostra i restanti 3 commenti

L'html

<button class="the-btn">cliccami</button>
<div class="container"></div>

Il js:

<script>
jQuery(".the-btn").click(function(){

    var param1 = 'qualcosa';
    var param2 = 'qualcos\'altro';

    $("div.container").html("caricamento contenuto in corso....");

    jQuery.ajax({
        url: ajaxurl,
        type: POST, //'post|get|put'
        data: {
            action: 'my_php_function_name', 'param1':'qualcosa', 'param2':'qualcos\'altro'
           
        },
        success: function(data) {
            // Cosa devo fare...
            jQuery("div.container").html(data);

        },
        fail: {
            // Cosa devo fare...
            jQuery("div.container").html("caricamento dati fallito");
        }
    })
    return false;
});
</script>

Aggiungi a functions.php

//Quindi, se vuoi che venga eseguito sia per i visitatori che per gli utenti loggati, puoi fare così:

add_action('wp_ajax_load_my_php_function_name', 'my_php_function_name'); 
add_action('wp_ajax_nopriv_my_php_function_name', 'my_php_function_name'); 

function my_php_function_name() {

    $param1 = $_POST['param1'];
    $param2 = $_POST['param2'];

    echo $param1." ".$param2;

}

Se ajaxurl non è definito, come dovrebbe essere, ma se non lo è, aggiungi questo:

<script type="text/javascript">
var ajaxurl = '<?php echo str_replace( array('http:', 'https:'), '', admin_url('admin-ajax.php') ); ?>';
</script>

Maggiori informazioni su ajax e Wordpress: https://codex.wordpress.org/AJAX_in_Plugins

samjco-com

599

14 apr 2022 08:03:41

Kaeles 64 · Accepted Answer · 2016-12-21T10:59:49Z

Utilizza l'API Ajax fornita da WordPress.

In primo luogo, prepara la tua richiesta Ajax:

<script>
$(".post-link").click(function(){
    var post_id = $(this).attr("rel"); // questo è l'ID del post
    $("#post-container").html("caricamento contenuto");
    $.ajax({
        url: myapiurl.ajax_url,
        type: 'post|get|put',
        data: {
            action: 'my_php_function_name',
            post_id: post_id
        },
        success: function(data) {
            // Cosa devo fare...
        },
        fail: {
            // Cosa devo fare...
        }
    });
    return false;
});
</script>

Ora, devi creare la tua elaborazione WordPress. Puoi inserire questo codice nel tuo functions.php o in un file di plugin.

add_action( 'admin_enqueue_scripts', 'my_ajax_scripts' );
function my_ajax_scripts() {
    wp_localize_script( 'ajaxRequestId', 'myapiurl', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

E poi... la tua funzione che recupera i tuoi post

function my_php_function_name() {
    // Cosa devo fare...
}

PS: Non inserire mai codice nella cartella root di installazione. Usa il functions.php del tuo tema, o crea un plugin. È molto importante per la manutenibilità e la sicurezza. Buon divertimento :)