php - Help me with my first very basic plugin

admin管理员组

文章数量:1415139

I am trying to create my first worpress plugin!

Actually, the idea is when i click on the button, an ajax request is sent toward php file (ajax-process.php ), it contains a very basic code to pull some data from database and then displaying it as an alert or other in my home page .

This is my plugin floder (inside wordpress plugins folder)

• DB-Puller :

     - DB-Puller.php
     - ajax-process.php
  

  And js (js_file.js) + css (css_file.css) folders.

Here what contains DB-Puller.php

<?php
/**
 * Plugin Name: DB-Puller 
 * Plugin URI: /
 * Description: This is a my firt plugin, it(s allows to display data from database. 
 * Version: 0.1
 * Author: Firest Last name
 * Author URI: /
 * License: GPL3
 */

function scripts_files_enqueue_scripts() {

// Adding css file    
wp_enqueue_style('css_file',plugins_url( 'css/css_file.css', __FILE__ ) );

// Adding JS file    
wp_enqueue_script( 'js_file', plugins_url( 'js/js_file.js', __FILE__ ), array('jquery'), '1.0', true );
}


add_action('wp_enqueue_scripts', 'scripts_files_enqueue_scripts');

/* Load Ajax Callback to "wp_ajax_*" Action Hook */
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_action_callback' );

?>

And This what contains ajax-process.php
N.B : the database table is very basic, it contains just id + text columns

<?php

function my_ajax_action_callback()
{
   if (isset($_POST['req']))
        {
            global $wpdb;
            $quer = $wpdb->get_results( "SELECT * FROM wp_custom_table_1" ); 
            $arr = $quer[0]->text;
            echo $arr;
            die();
        }
    wp_die(); // required. to end AJAX request.
}

What contains js file

jQuery(function($){

    $('body').prepend('<button class="btn" type="button">PULL DATA</button>');

    $('button.btn').on('click', function()
                  {

        $.ajax({

            url:'http://127.0.0.1/wp522/wp-content/plugins/DB-Puller/ajax-process.php',
            method:'POST',
            data:{
                  req:'',
                  action:'my_ajax_action',
                  },
            success:function(data)
            {
                alert(data);
            },
            error:function()
            {
                alert(erooor);
            }
        })
    })
})

The Alert is sent empty ! Please help me to detect where is the problem!

Thank you.

I am trying to create my first worpress plugin!

Actually, the idea is when i click on the button, an ajax request is sent toward php file (ajax-process.php ), it contains a very basic code to pull some data from database and then displaying it as an alert or other in my home page .

This is my plugin floder (inside wordpress plugins folder)

• DB-Puller :

     - DB-Puller.php
     - ajax-process.php
  

  And js (js_file.js) + css (css_file.css) folders.

Here what contains DB-Puller.php

<?php
/**
 * Plugin Name: DB-Puller 
 * Plugin URI: https://my-web-site/
 * Description: This is a my firt plugin, it(s allows to display data from database. 
 * Version: 0.1
 * Author: Firest Last name
 * Author URI: https://my-web-site/
 * License: GPL3
 */

function scripts_files_enqueue_scripts() {

// Adding css file    
wp_enqueue_style('css_file',plugins_url( 'css/css_file.css', __FILE__ ) );

// Adding JS file    
wp_enqueue_script( 'js_file', plugins_url( 'js/js_file.js', __FILE__ ), array('jquery'), '1.0', true );
}


add_action('wp_enqueue_scripts', 'scripts_files_enqueue_scripts');

/* Load Ajax Callback to "wp_ajax_*" Action Hook */
add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_action_callback' );

?>

And This what contains ajax-process.php
N.B : the database table is very basic, it contains just id + text columns

<?php

function my_ajax_action_callback()
{
   if (isset($_POST['req']))
        {
            global $wpdb;
            $quer = $wpdb->get_results( "SELECT * FROM wp_custom_table_1" ); 
            $arr = $quer[0]->text;
            echo $arr;
            die();
        }
    wp_die(); // required. to end AJAX request.
}

What contains js file

jQuery(function($){

    $('body').prepend('<button class="btn" type="button">PULL DATA</button>');

    $('button.btn').on('click', function()
                  {

        $.ajax({

            url:'http://127.0.0.1/wp522/wp-content/plugins/DB-Puller/ajax-process.php',
            method:'POST',
            data:{
                  req:'',
                  action:'my_ajax_action',
                  },
            success:function(data)
            {
                alert(data);
            },
            error:function()
            {
                alert(erooor);
            }
        })
    })
})

The Alert is sent empty ! Please help me to detect where is the problem!

Thank you.

• plugins
• php
• plugin-development
• ajax

Share Improve this question asked Aug 18, 2019 at 15:52 iMediMed 111 bronze badge

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I have already answered this question stackoverflow, but adding the answer here as well:

Looking on the code it does not seem like the Wordpress way of doing this kind of thing.

First you need to include your ajax-process.php in the plugins main file e.g:

require_once plugin_dir_path(__FILE__) . '/ajax-process.php';

Second, you need to register your ajax callback like this:

add_action('wp_ajax_my_ajax_action', 'my_ajax_function');
add_action('wp_ajax_no_priv_my_ajax_action', 'my_ajax_function');

Then register the ajaxUrl in scripts_files_enqueue_scripts() so it accessible from your javascript. The admin-ajax.php file handles all ajax requests:

wp_localize_script(
   'js_file',
   'ajax',
    array(
      'ajaxUrl' => admin_url('admin-ajax.php'),
    )
);

Then in your javascript you need to use the ajaxUrl and specifying the action which will tell Wordpress which callback should be triggered:

jQuery(function($) {
  $('body').prepend('<button class="btn" type="button">PULL DATA</button>');

  $('button.btn').on('click', function() {
    $.post({
        url: ajax.ajaxUrl,
        data: {
          req: '',
          action: 'my_ajax_action',
        },
        success: function(data) {
          alert(data);
        },
        error: function() {
          alert('error');   
        }
    });
});

Here is a good article AJAX in Plugins, explaining how to use ajax in a plugin.

Try bellow Code:

• DB-Puller.php

  <?php
  /**
   * Plugin Name: DB-Puller 
   * Plugin URI: https://my-web-site/
   * Description: This is a my firt plugin, it(s allows to display data from database. 
   * Version: 0.1
   * Author: Firest Last name
   * Author URI: https://my-web-site/
   * License: GPL3
   */
  
  function scripts_files_enqueue_scripts() {
      // Adding css file    
      wp_enqueue_style('css_file',plugins_url( 'css/css_file.css', __FILE__ ) );
  
      // Adding JS file    
      wp_enqueue_script( 'js_file', plugins_url( 'js/js_file.js', __FILE__ ), array('jquery'), '1.0', true );
      # define ajax objext
      wp_localize_script('js_file','my_ajax_object',array('ajaxurl' => admin_url( 'admin-ajax.php' )));
  }
  
  add_action('wp_enqueue_scripts', 'scripts_files_enqueue_scripts');
  
  require_once plugin_dir_path( __FILE__ ) . 'ajax-process.php';
  
  /* Load Ajax Callback to "wp_ajax_*" Action Hook */
  add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_action_callback' );
  add_action( 'wp_ajax_my_ajax_action', 'my_ajax_action_callback' );
  

js/js_file.js

jQuery(function($){

    $('body').prepend('<button class="btn" type="button">PULL DATA</button>');

    $('button.btn').on('click', function()
                  {

        $.ajax({

            url:my_ajax_object.ajaxurl,
            method:'POST',
            data:{
                  req:'',
                  action:'my_ajax_action',
                  },
            success:function(data)
            {
                alert(data);
            },
            error:function()
            {
                alert(erooor);
            }
        })
    })
})

ajax-procees.php

<?php

function my_ajax_action_callback()
{
   if (isset($_POST['req']))
        {
            global $wpdb;
            $quer = $wpdb->get_results( "SELECT * FROM wp_custom_table_1" ); 
            $arr = $quer[0]->text;
            echo $arr;
            die();
        }
    wp_die(); // required. to end AJAX request.
}

in above code, i have added a localize ajax path and include a ajax-process.php file, and in js_file.js i have added url of ajax. let me know if this works for you!

本文标签： phpHelp me with my first very basic plugin