jquery - ajax call in wordpress front end

admin管理员组

文章数量:1125370

In my plugin i'm using two ajax calls in back end. that worked well. but to provide the same functionality in front end i loaded the copy of these two functions with another names and my code is:

in my plugin main file:

function my_action_callback(){
  global $wpdb; 
if (@$_POST['id']) {

    $daty = $wpdb->get_results("select eemail_id,eemail_content,eemail_subject  from " . WP_eemail_TABLE . " where 1=1 and eemail_status='YES' and eemail_id=" . $_POST['id']);
    //echo "select eemail_id,eemail_content,eemail_subject  from ".WP_eemail_TABLE." where 1=1 and eemail_status='YES' and eemail_id=".$_POST['id'];

    if (!empty($daty)) {
        foreach ($dat as $datt) {
            echo $datt->eemail_content . "_" . $datt->eemail_subject;
            die();
        }
      }
     } 
   }
  add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

and in my settings.js

function showEntryfront(id)
   {


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

    var data = {
        action: 'my_action',
        id: id

    };

     jQuery.post(ajaxurl, data, function(response) {
        //alert('Got this from the server: ' + response);
        var n=response.split("_");  
        jQuery('textarea#mail_contents').text(n[0]);
        $('#mail_subject').val(n[1]);
        // jQuery('textbox#mail_subject').text(n[1]);
          });
       });
   }

and the plugin page which fires this showEntryfront() is:

<select name="eemail_subject_drop" id="eemail_subject_drop" onchange="showEntryfront(this.value)">
                <option value="">Select Email subject</option>
                <?php echo $eemail_subject_drop_val; ?>
            </select>
            <input type="hidden" name="send" value="" id="send" /> </td>
  <tr height="60px;"> <td>
            <textarea   name="mail_contents" id="mail_contents" rows="4" cols="40" ></textarea>

        </td></tr>

The second function is doing the same. only the db table is different.

Still my firebug console shows

ReferenceError: ajaxurl is not defined
jQuery.post(ajaxurl, data, function(response) {

and the textarea is not filling up with the db data from the table WP_eemail_Table. Please not that this functionality worked in wp-admin backend. i know the ajax call in admin will automatically load by admin-ajax.php. but how can i implement the same in front end. any mistake in my code??

In my plugin i'm using two ajax calls in back end. that worked well. but to provide the same functionality in front end i loaded the copy of these two functions with another names and my code is:

in my plugin main file:

function my_action_callback(){
  global $wpdb; 
if (@$_POST['id']) {

    $daty = $wpdb->get_results("select eemail_id,eemail_content,eemail_subject  from " . WP_eemail_TABLE . " where 1=1 and eemail_status='YES' and eemail_id=" . $_POST['id']);
    //echo "select eemail_id,eemail_content,eemail_subject  from ".WP_eemail_TABLE." where 1=1 and eemail_status='YES' and eemail_id=".$_POST['id'];

    if (!empty($daty)) {
        foreach ($dat as $datt) {
            echo $datt->eemail_content . "_" . $datt->eemail_subject;
            die();
        }
      }
     } 
   }
  add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

and in my settings.js

function showEntryfront(id)
   {


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

    var data = {
        action: 'my_action',
        id: id

    };

     jQuery.post(ajaxurl, data, function(response) {
        //alert('Got this from the server: ' + response);
        var n=response.split("_");  
        jQuery('textarea#mail_contents').text(n[0]);
        $('#mail_subject').val(n[1]);
        // jQuery('textbox#mail_subject').text(n[1]);
          });
       });
   }

and the plugin page which fires this showEntryfront() is:

<select name="eemail_subject_drop" id="eemail_subject_drop" onchange="showEntryfront(this.value)">
                <option value="">Select Email subject</option>
                <?php echo $eemail_subject_drop_val; ?>
            </select>
            <input type="hidden" name="send" value="" id="send" /> </td>
  <tr height="60px;"> <td>
            <textarea   name="mail_contents" id="mail_contents" rows="4" cols="40" ></textarea>

        </td></tr>

The second function is doing the same. only the db table is different.

Still my firebug console shows

ReferenceError: ajaxurl is not defined
jQuery.post(ajaxurl, data, function(response) {

and the textarea is not filling up with the db data from the table WP_eemail_Table. Please not that this functionality worked in wp-admin backend. i know the ajax call in admin will automatically load by admin-ajax.php. but how can i implement the same in front end. any mistake in my code??

• jquery
• ajax
• front-end

Share Improve this question edited Aug 19, 2014 at 8:03 Zammuuz asked Aug 19, 2014 at 7:48 ZammuuzZammuuz 78822 gold badges1111 silver badges2525 bronze badges 4

• ajaxurl is not available in front end. You need to explicitly define it yourself for frontend. Check this, you can get reference to implement ajax in front end. link – Nilambar Sharma Commented Aug 19, 2014 at 8:52
• @Nilambar: Hi friend..thanks for your reply.. i have already tried the method "wp_ajax_nopriv_" as prescribed in link that u've shared. can u please guide me to find out the error in the way i used for explicitly defining ajaxurl.? – Zammuuz Commented Aug 19, 2014 at 9:13
• You have to localize script by using wp_localize_script function example – Nilambar Sharma Commented Aug 19, 2014 at 9:16
• Just a quick note: ` ... eemail_id=" . $_POST['id'])` is ripe for a SQL injection. – David Hayes Commented Jul 6, 2018 at 13:04

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 4

You have to localize script by using wp_localize_script function. In the admin side ajaxurl is already available. But in front end you have to localize script to define ajaxurl.

Example:

wp_enqueue_script( 'custom-ajax-request', '/path/to/settings.js', array( 'jquery' ) );
wp_localize_script( 'custom-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

There actually is an integrated solution in WordPress core to use Ajax on the front end! WordPress has a little-known but very useful javascript library that can be accessed via the JS object window.wp, like this:

// In JS:

var action = 'my_action';
var data = {id: 123};

var promise = window.wp.ajax.post( action, data );
promise.always(function(response) {
  console.log('Ajax done:', response);
});

// the promise object also has other methods:
// `done()` / `fail()` / `progress()` / `state()` / `abort()`

Advantage is, that this object is maintained and used by WordPress core. So you can rely that it's up-to-date, working, and most robust way to handle your Ajax. Also note that you do not need to handle the jQuery stuff...

If you do not have the javascript object window.wp in the front-end then you need to load it by enqueueing this WP core script:

<?php

wp_enqueue_scripts( 'wp-utils' );

本文标签： jqueryajax call in wordpress front end