How to make an ajax call with parameters into WordPress site

  • Resolved colome

    (@colome)


    9 years, 8 months ago

    I have a simple web with an ajax call with parameters that works fine alone: http://www.colome.org/utils/

    This is the sample code:

    index.html:

    
<!DOCTYPE html>
<html lang=en>
<head>
    ...
    <script src="codi.js"></script>
    ...
</head>
<body>
<section id="main">
    <table id="tng" class="datagrid">
        <tbody>
        </tr><tr>
            <td width="50%" align="right"><b>Host or IP:</b></td>
            <td><input  id="ip" size="20" value="" ></td>
            <td><button type="button" onclick="Ping()">Ping</button></td>
        </tr>
        </tbody>
    </table>
  ...
</section>  
<h3 id="notification"></h3>
</body>
</html>

    I created a function “Ping” inside codi.js that makes the ajax call

    codi.js:

    function Ping()
{
    $("#image").show();
        var ip=document.getElementById('ip');
    $.ajax({
        type: "POST",
        url: "http://...../ping.php",
        cache: false,
        //contentType: "application/json; charset=utf-8",
        //dataType: "json",
        data: {"ip" : ip.value}, 
        success: onSuccesPing,
        error: onErrorPing,
        crossDomain:true
    });

}
function onSuccesPing(data,status)
{
   document.getElementById("notification").innerHTML=data;
}
function onErrorPing(data,status)
{
   document.getElementById("notification").innerHTML=data.responseText);
}

    And finally the ping.php code, very simple:

    
<?php
$ip =   $_POST["ip"];
exec("ping -c 3 ".$ip." 2>&1", $output, $status);
foreach ($output as $key => $value) {
    echo ($value.'<br>');
}

?>

    I was trying to integrate this code to my wordpress website, like the example below:
    https://codex.wordpress.org/AJAX_in_Plugins

    but I don’t know how to pass parameters to the ajax call, please can you help me? thanks

    • This topic was modified 9 years, 8 months ago by colome.
Viewing 2 replies - 1 through 2 (of 2 total)
  • catacaustic

    (@catacaustic)

    9 years, 8 months ago

    Parameters are passed through the data value in your AJAX call, so you could use something like this:

        $.ajax({
        type: "POST",
        url: "http://...../ping.php",
        cache: false,
        //contentType: "application/json; charset=utf-8",
        //dataType: "json",
        data: {
            "ip" : ip.value
            "param_1" : "Value for parameter 1"
            "param_2" : param_2_value
        }, 
        success: onSuccesPing,
        error: onErrorPing,
        crossDomain:true
    });
    Thread Starter colome

    (@colome)

    9 years, 8 months ago

    Thanks catacausic!

    I answer myself:
    Then upload the js (ping.js) inside my theme js folder in my case: public_html/wp-content/themes/metone_wp/js:

    function PING(){
    $imatge=document.getElementById('image');
    $imatge.show();
    $ip=document.getElementById('ip');
    $val=ip.value;
    $params={action:'ping_php',ip: $val}

    jQuery.ajax({
       type: "POST",
       url: ajax_object.ajaxurl,
       cache: false,
       //contentType: "application/json; charset=utf-8",
       //dataType: "json",
       data: $params, 
       success: onSuccesPing,
       error: onErrorPing
       //error: onErrorPing,
       //crossDomain:true
     });
   //another way to make the same
   // jQuery.post(ajax_object.ajaxurl, $params,function (response){
   //   document.getElementById("notification").innerHTML=response;
   //   document.getElementById("image").style.display = "none";
   //  });
}
function onSuccesPing(data,status)
{
   jQuery("#notification").fadeIn(0); 
   document.getElementById("notification").innerHTML=data;
   document.getElementById("image").style.display = "none";
   jQuery("#notification").delay(5200).fadeOut(300);

}
function onErrorPing(data,status)
{
   jQuery("#notification").fadeIn(0);  
   document.getElementById("notification").innerHTML=data.responseText;
   document.getElementById("image").style.display = "none";
   jQuery("#notification").delay(5200).fadeOut(300);
}

    The trick to pass paramters to the ajax call is the line:

    $params={action:'ping_php',ip: $val}

    $params is an array of parameters, is necesary to have a mandatory parameter “action” that refers the php function defined below normaly at the functions.php of wordpress theme.

    The parameters can be accessed at the php function as $_POST variables in my case $_POST[‘ip’].

    to define the functions in wordpress I was used the theme functions.php, and and this piece of code:

    //----------------------------- test utils ini-----------------------------------------
function ping_php ()
{
     $ip=$_POST['ip'];
    exec("ping -c 3 ".$ip." 2>&1", $output, $status);
    foreach ($output as $key => $value) {
        echo ($value.'<br>');
    }
   die();
}
add_action( 'wp_ajax_ping_php', 'ping_php' );
add_action( 'wp_ajax_nopriv_ping_php', 'ping_php' );
function enqueue_scripts() {
        wp_register_script('ajax-script',  get_template_directory_uri() .'/js/ping.js', array('jquery'), 1.0 ); 
        wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl
    wp_enqueue_script( 'ajax-script'); // jQuery will be included automatically
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');
//---------------------------test utils end ----------------------------------------------

    is important to folow the correct order to enqueue the script

    First the wp_register_script: include the directory of the js file and jquery enabled
    then wp_localize_script: usefull to pass variables from wordpress to my script in my case the url of ajax processing: ajaxurl
    finally wp_enqueue_script

    It is also importate add wp_die() or die() at the end of the php function, if not the function returns “0”

    It is also very inportant that the function names match exactly:

    add_action( ‘wp_ajax_ping_php‘, ‘ping_php’ );
    add_action( ‘wp_ajax_nopriv_ping_php’, ‘ping_php’ );

    with the parameter “action” of the ajax call

    • This reply was modified 9 years, 8 months ago by colome.
    • This reply was modified 9 years, 8 months ago by colome.
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How to make an ajax call with parameters into WordPress site’ is closed to new replies.

Tags