Cargar contenido en un div con AJAX

Question

Cargar contenido en un div con AJAX

21 dic 2016, 10:31:57

Vistas: 15.6K

Votos: 1

por favor dame consejo, soy muy nuevo en AJAX. Tengo una lista de posts, si hago clic debe mostrar la información del post en un div sin recargar la página. Sé que debo usar AJAX, así que creé un archivo: loadcontent.php en la carpeta raíz y usé este código, pero no sé cómo enviar y recibir datos a través de AJAX. Necesito pasar un ID para obtener la información del post.

<script>
   $(document).ready(function(){

    $.ajaxSetup({cache:false});
        $(".post-link").click(function(){
        var post_id = $(this).attr("rel"); //este es el ID del post
        $("#post-container").html("cargando contenido...");
        $("#post-container").load("/loadcontent.php");
       return false;
    });

  });
</script>

Yoona

39

publicaciones ajax

Todas las respuestas a la pregunta

Comentarios

Hola, tengo un error en la consola: my apiurl no está definido

Yoona

21 dic 2016 11:29:25

¿Sabes cuál podría ser el problema? Gracias por tu respuesta.

Yoona

21 dic 2016 11:36:04

Esto ocurre porque JS no tiene myapiurl en su alcance... ¿Funciona tu solicitud ajax?

Kaeles

21 dic 2016 12:06:50

Te recomiendo que leas esta documentación: https://codex.wordpress.org/AJAX_in_Plugins Mi solución es la más simple, pero no la mejor. Lee atentamente esta documentación y no tendrás más problemas con las solicitudes Ajax en WordPress.

Kaeles

21 dic 2016 12:12:40

Intenta reemplazar 'myapiurl' con 'ajaxurl'. Aparentemente es la URL predeterminada proporcionada por WordPress.

Kaeles

21 dic 2016 12:16:26

Mostrar los 3 comentarios restantes

El HTML

<button class="the-btn">haz clic aquí</button>
<div class="container"></div>

El JS:

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

    var param1 = 'algo';
    var param2 = 'algo más';

    $("div.container").html("cargando contenido....");

    jQuery.ajax({
        url: ajaxurl,
        type: POST, //'post|get|put'
        data: {
            action: 'my_php_function_name', 'param1':'algo', 'param2':'algo más'
           
        },
        success: function(data) {
            // Qué debo hacer...
            jQuery("div.container").html(data);

        },
        fail: {
            // Qué debo hacer...
            jQuery("div.container").html("falló la carga de datos");
        }
    })
    return false;
});
</script>

Añadir a functions.php

//Entonces, si quieres que se ejecute en el front-end tanto para visitantes como para usuarios logueados, puedes hacer esto:

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;

}

Si ajaxurl no está definido, lo cual debería estarlo, pero si no lo está, añade esto:

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

Más información sobre ajax y Wordpress: https://codex.wordpress.org/AJAX_in_Plugins

samjco-com

599

14 abr 2022 08:03:41

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

Utiliza la API Ajax proporcionada por WordPress.

En primer lugar, configura tu solicitud Ajax:

<script>
$(".post-link").click(function(){
    var post_id = $(this).attr("rel"); //este es el ID del post
    $("#post-container").html("cargando contenido...");
    $.ajax({
        url: myapiurl.ajax_url,
        type: 'post|get|put',
        data: {
            action: 'my_php_function_name',
            post_id: post_id
        },
        success: function(data) {
            // Qué debo hacer...
        },
        fail: {
            // Qué debo hacer...
        }
    });
    return false;
});
</script>

Ahora, debes crear tu tratamiento en WordPress. Puedes colocar este código en tu functions.php o en un archivo de 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' ) ) );
}

Y luego... tu función que recupera tus posts

function my_php_function_name() {
    // Qué debo hacer...
}

PD: Nunca coloques código en la carpeta raíz de instalación. Usa functions.php de tu tema o crea un plugin. Es muy importante para la mantenibilidad y seguridad. ¡Diviértete :)