Încărcați conținut într-un div cu ajax

Question

Încărcați conținut într-un div cu ajax

21 dec. 2016, 10:31:57

Vizualizări: 15.6K

Voturi: 1

Vă rog să mă ajutați cu un sfat, sunt foarte începător în Ajax. Am o listă de postări, iar când dau click pe una, vreau să afișez informațiile postării într-un div fără a reîncărca pagina. Știu că trebuie să folosesc Ajax, așa că am creat un fișier: loadcontent.php în folderul root și am folosit codul de mai jos, dar nu știu cum să trimit și să primesc date prin Ajax. Trebuie să transmit un ID pentru a obține informațiile postării.

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

    $.ajaxSetup({cache:false});
        $(".post-link").click(function(){
        var post_id = $(this).attr("rel"); //acesta este ID-ul postării
        $("#post-container").html("se încarcă conținutul...");
        $("#post-container").load("/loadcontent.php");
       return false;
    });

  });
</script>

Yoona

39

postări ajax

Toate răspunsurile la întrebare

Comentarii

Bună, am o eroare în consolă: my apiurl nu este definit

Yoona

21 dec. 2016 11:29:25

Știi care ar putea fi problema? Mulțumesc pentru răspuns.

Yoona

21 dec. 2016 11:36:04

Aceasta se întâmplă pentru că JS nu are myapiurl în scope-ul său... Funcționează cererea ta ajax?

Kaeles

21 dec. 2016 12:06:50

Îți recomand să citești acest document: https://codex.wordpress.org/AJAX_in_Plugins Soluția mea este cea mai simplă, dar nu cea mai bună. Citește cu atenție această documentație și nu vei mai avea probleme cu cererile Ajax în WordPress.

Kaeles

21 dec. 2016 12:12:40

Încearcă să înlocuiești 'myapiurl' cu 'ajaxurl'. Se pare că aceasta este adresa URL implicită oferită de WordPress.

Kaeles

21 dec. 2016 12:16:26

Arată celelalte 3 comentarii

HTML-ul:

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

JavaScript-ul:

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

    var param1 = 'ceva';
    var param2 = 'altceva';

    $("div.container").html("se încarcă conținutul....");

    jQuery.ajax({
        url: ajaxurl,
        type: POST, //'post|get|put'
        data: {
            action: 'my_php_function_name', 'param1':'ceva', 'param2':'altceva'
           
        },
        success: function(data) {
            // Ce trebuie să fac...
            jQuery("div.container").html(data);

        },
        fail: {
            // Ce trebuie să fac...
            jQuery("div.container").html("încărcarea datelor a eșuat");
        }
    })
    return false;
});
</script>

Adăugați în functions.php

//Deci, dacă doriți să se declanșeze în front-end atât pentru vizitatori, cât și pentru utilizatorii autentificați, puteți face astfel:

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;

}

Dacă ajaxurl nu este definit, ceea ce ar trebui să fie, dar dacă nu este, adăugați asta:

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

Mai multe informații despre AJAX și 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

Utilizează API-ul Ajax oferit de WordPress.

În primul rând, corectează cererea ta Ajax:

<script>
$(".post-link").click(function(){
    var post_id = $(this).attr("rel"); //acesta este ID-ul postării
    $("#post-container").html("se încarcă conținutul");
    $.ajax({
        url: myapiurl.ajax_url,
        type: 'post|get|put',
        data: {
            action: 'my_php_function_name',
            post_id: post_id
        },
        success: function(data) {
            // Ce trebuie să fac...
        },
        fail: {
            // Ce trebuie să fac...
        }
    });
    return false;
});
</script>

Acum, trebuie să creezi tratamentul în WordPress. Poți pune acest cod în functions.php sau într-un fișier 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' ) ) );
}

Și apoi... funcția ta care preia postările

function my_php_function_name() {
    // Ce trebuie să fac...
}

PS: Niciodată nu pune cod în folderul rădăcină al instalației. Folosește functions.php din tema ta, sau creează un plugin. Este foarte important pentru întreținere și securitate. Distracție plăcută :)