Cum să folosești wp_ajax() fără wp_enqueue_script?

Question

Cum să folosești wp_ajax() fără wp_enqueue_script?

28 mar. 2011, 15:05:59

Vizualizări: 13.9K

Voturi: 1

Salutare,

Am o situație ciudată... Încerc să folosesc wp_ajax() pentru prima dată. În mod normal folosesc o cerere jQuery ajax obișnuită, dar în cazul actual primesc multe erori, așa că m-am gândit să încerc wp_ajax().

Nu înțeleg totuși!

Următorul fragment de cod...

// încarcă fișierul JavaScript care face cererea AJAX
wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js' );

// declară URL-ul către fișierul care gestionează cererea AJAX (wp-admin/admin-ajax.php)
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

se transformă în...

<script type="text/javascript" src="http://example.com/wordpress/wp-content/plugins/myajax/js/ajax.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var MyAjax = {
    ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/* ]]> */
</script>

Totuși, eu nu am un plugin sau ceva care ar trebui să folosească asta, dar întreaga mea pagină trebuie să facă această cerere AJAX. Prin urmare, prima linie cu wp_enqueue_script() nu are sens. Nu am nevoie să încarc un fișier js specific pentru asta, deoarece am deja întregul meu fișier script.js încorporat manual în secțiunea <head>. Acesta este locul unde se lansează cererea AJAX. Totuși, dacă omit această linie (//wp_enqueue_script()...), a doua parte nu funcționează.

Deci nu va apărea:

<script type="text/javascript">
/* <![CDATA[ */
var MyAjax = {
    ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/* ]]> */
</script>

în secțiunea <head> a paginii mele. Ce nu înțeleg eu aici? Am nevoie neapărat să pot trimite o cerere AJAX din interiorul fișierului meu normal script.js.

Idei?

Actualizare: Fișierul meu script.js (încorporat manual în <head>) ar trebui să facă o cerere AJAX:

var response;
$.post(
    // vezi sfatul #1 pentru cum declarăm variabile globale JavaScript
    MyAjax.ajaxurl,
    {
        // aici declarăm parametrii care vor fi trimiși împreună cu cererea
        // asta înseamnă că vor fi declanșate următoarele action hooks:
        // wp_ajax_nopriv_myajax-submit și wp_ajax_myajax-submit
        action: 'wp_ajax_nopriv_searchmap',
    },
    function(response) {
        $sr.html(response);
    }
);

Funcția din fișierul meu functions.php pe care vreau să o apelez arată astfel:

// încarcă fișierul JavaScript care face cererea AJAX
wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js' );

// declară URL-ul către fișierul care gestionează cererea AJAX (wp-admin/admin-ajax.php)
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

// acest hook se declanșează dacă vizitatorul curent nu este autentificat
if (isset($_GET['action'])) {
    do_action( 'wp_ajax_nopriv_' . $_GET['action'] );
}
// dacă este autentificat:
if (isset($_POST['action'])) {
    do_action( 'wp_ajax_' . $_POST['action'] );
}
if(is_admin()) {
    add_action( 'wp_ajax_searchmap', 'my_searchmap_function' );
} else {
    add_action( 'wp_ajax_nopriv_searchmap', 'my_searchmap_function' );
}

function my_searchmap_function() {
    // Pornim bufferul de ieșire
    ob_start();
?>
<div>
    <h3>Pagini</h3>
        <ul>
            <?php wp_list_pages('title_li=&depth=0&exclude='); ?>
        </ul>
    <h3>Articole</h3>
        <?php $first = 0;?>
        <ul>
        <?php
        $myposts = get_posts('numberposts=-1&offset=$first');
        foreach($myposts as $post) :
        ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
        <?php endforeach; ?>
        </ul>
    <h3>Categorii</h3>
        <ul>
            <?php wp_list_categories('title_li=&orderby=name'); ?>
        </ul>
</div>  
<?php 
    $output = ob_get_contents();

    // Oprim bufferul de ieșire
    ob_end_clean();
    $response = json_encode($output);

    // ieșirea răspunsului
    header("Content-Type: application/json");
    echo $response;

    // IMPORTANT: nu uita să "ieși"
    exit;
}

Ce nu înțeleg eu aici? Vreau pur și simplu să pot solicita date via AJAX din interiorul fișierului meu JavaScript normal. Am nevoie să procesez HTML-ul care revine în fișierul meu JavaScript.

Idee ce fac greșit sau mai bine, ce trebuie să fac pentru ca asta să funcționeze?

mathiregister

1.54K

jquery ajax wp enqueue script

Toate răspunsurile la întrebare

Comentarii

mulțumesc. Deci, cum pot apela o funcție din fișierul meu functions.php prin ajax? Am actualizat întrebarea mea. Aș aprecia foarte mult ajutorul tău în legătură cu asta!

mathiregister

28 mar. 2011 15:57:13

Răspuns actualizat, vezi mai sus. :)

t31os

28 mar. 2011 16:09:13

mulțumesc. Dar despre liniile wp_enqueue_script(); și wp_localize_script()? Trebuie să le păstrez? Ar trebui ca wp_enqueue_script() să indice același director ca fișierul meu js normal (unde vreau să apelez ajax-ul)? Pentru că altfel nu pot folosi MyAjax.ajaxurl, { action : 'wp_ajax_nopriv_searchmap', } pentru a apela scriptul - pentru că MyAjax nu există dacă nu folosesc funcția localize_script? Cum ar arăta codul meu javascript pentru a apela această funcție?

mathiregister

28 mar. 2011 16:16:24

@mathiregister: așa este, trebuie să le păstrezi, dacă nu folosești p_enqueue_script(); pentru a-l încărca în modul WordPress, atunci nu poți folosi wp_localize_script() deoarece acel script nu este cunoscut de WordPress, poți afișa scriptul și defini URL-ul ajax în php dar asta ar fi o practică proastă. și în final action : 'wp_ajax_nopriv_searchmap' ar trebui să fie action : 'searchmap' prefixul hook este făcut pentru tine.

Bainternet

28 mar. 2011 16:49:32

@mathiregister - Am actualizat din nou răspunsul meu pentru tine.

t31os

28 mar. 2011 16:56:51

Arată celelalte 5 comentarii

Acest tutorial din codex oferă o prezentare simplă a procesului:

http://codex.wordpress.org/AJAX_in_Plugins

Rețineți că variabila ajaxurl este deja definită de nucleul WP, dar doar în zona de administrare. Pentru a o adăuga în partea publică, folosiți:

<?php
function pluginname_ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
<?php
}
add_action('wp_head','pluginname_ajaxurl');

scribu

13.2K

28 mar. 2011 16:55:43

Comentarii

Ah, dar există o problemă, nu este întotdeauna definită, am fost prins când am încercat să o folosesc... Cel puțin, nu era întotdeauna disponibilă în testele mele, și nu pentru utilizatorii nelogati.

t31os

28 mar. 2011 17:32:38

Într-adevăr, am adăugat clarificări.

scribu

28 mar. 2011 19:48:23

Otto cu un fragment de cod cum să definești variabila în frontend - http://wordpress.org/support/topic/ajaxurl-is-not-defined?replies=4#post-1989445

Mario Peshev

7 oct. 2012 17:31:59

t31os 18.7K · Accepted Answer · 2011-03-28T15:48:57Z

Bine, mai întâi permiteți-mi să explic puțin, pentru a înțelege scopul acestor funcții.

wp_enqueue_script()

Descriere:
O metodă sigură de a adăuga scripturi JavaScript într-o pagină generată de WordPress. Practic, include scriptul dacă nu a fost deja inclus și încarcă cel furnizat de WordPress.
wp_localize_script()

Descriere:
Localizează un script, dar numai dacă scriptul a fost deja adăugat. Poate fi folosit și pentru a include date arbitrare JavaScript într-o pagină.

Când localizezi un script, tot ceea ce faci este să configurezi o acțiune care afișează variabile JavaScript în pagină, dar aceste variabile sunt legate de scriptul la care le înregistrezi, acesta fiind primul parametru pe care îl transmiți la wp_localize_script și este cunoscut și sub denumirea de handle al scriptului.

wp_enqueue_script este folosit pentru a adăuga un fișier JavaScript în coadă, iar wp_localize_script este conceput să însoțească scripturile încărcate prin sistemul de coadă. Nu poți localiza nimic, așa că dacă nu folosești wp_enqueue_script, wp_localize_script nu are niciun scop aici.

În mod obișnuit, ai putea folosi cele două astfel...

$myvars = array( 
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'somevar1' => $somevar_from_somewhere,
    'somevar2' => $somevar_from_elsewhere
);
wp_enqueue_script( 'my-ajax-request', plugins_url( '/path/to/somefile.js', __FILE__ ) );
wp_localize_script( 'my-ajax-request', 'MyAjax', $myvars );

Ceea ce produce următorul rezultat în pagina ta...

<script type="text/javascript" src="path/to/somefile.js"></script>

<script type="text/javascript">
/* <![CDATA[ */
var MyAjax = {
    ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php",
    somevar1: "somevalue",
    somevar2: "someothervalue"
};
/* ]]> */
</script>

Pe care apoi îl poți referenția în scriptul tău, de exemplu:

jQuery(document).ready( function($) {

    alert( MyAjax.somevar1 ); // Afișează somevalue
    alert( MyAjax.somevar2 ); // Afișează someothervalue

});

Punând totul laolaltă, codul tău ar putea arăta cam așa...

// Configurarea callback-ului Ajax pentru acțiunea "searchmap" 
add_action( 'wp_ajax_searchmap', 'my_searchmap_function' );
add_action( 'wp_ajax_nopriv_searchmap', 'my_searchmap_function' );

// Funcția callback pentru acțiunea "searchmap"
function my_searchmap_function() {
    $myposts = get_posts('numberposts=-1&offset=$first');
?>
<div> 
    <h3>Pagini</h3>
    <ul>
        <?php wp_list_pages('title_li=&depth=0&exclude='); ?>
    </ul>

    <h3>Articole</h3>
    <ul>
        <?php foreach( $myposts as $post ) : setup_postdata( $post ); ?>

        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

        <?php endforeach; ?>
        <?php wp_reset_postdata(); ?>
    </ul>

    <h3>Categorii</h3>
    <ul>
    <?php wp_list_categories('title_li=&orderby=name'); ?>
    </ul>
</div>  
<?php 
    die;
}

JavaScript-ul... (presupunând că a fost adăugat în coadă și localizat)

jQuery(document).ready(function($) {
    $('a.myajax').click(function(){
        var data = {
            action: 'searchmap' // <--- acesta este numele corect al acțiunii
        };
        $.post( MyAjax.ajaxurl, data, function(response) {
            $('#myresult').html(response);
        });
        return false;
    });
});

Și apoi HTML-ul necesar în pagină pentru a declanșa acțiunea...

<a class="myajax" href="#">Apasă aici pentru a obține conținutul Ajax</a>
<div id="myresult"></div>

Răspunsul efectiv

În ceea ce privește nevoia de a face propriile lucruri și de a obține variabile afișate pentru scriptul tău, aș sugera să faci ceva de genul...

add_action( 'wp_head', 'my_js_vars', 1000 );

function my_js_vars() {

    // Dacă nu este o pagină specifică, oprește-te aici
    if( !is_page( 'my-page-with-ajax' ) )
        return;
    ?>
    <script type="text/javascript">
    /* <![CDATA[ */
    var MyAjax = {
        ajaxurl: '<?php admin_url('admin-ajax.php'); ?>',
            somevar: 'somevalue',
            someothervar: 'someothervalue'
    };
    /* ]]> */
    </script>
    <?php
    /*
       NOTĂ: 
       Asigură-te să nu lași o virgulă după ultimul element 
       din array-ul JS, altfel IE (Internet Explorer) va avea probleme cu JS-ul.
    */
}

Am lăsat codul pe care l-am postat anterior pentru ceilalți cititori.