how to use ajax in wordpress to show database columns using php and Json

I’m new using ajax and I have a code to display from wordpress some information from database columns.
I have this PHP code to connect with the database and create the JSON file:

<?php    
$username = $_REQUEST['username']; 
$password = $_REQUEST['password'];    

if (isset($username) && isset($password)) {
//CONEXION
    $host="localhost";
    $user="DB_Username";
    $pass="DB_Password";
    $dbname="DB_Name";

//Conexion
$conexion = mysqli_connect($host, $user, $pass,$dbname) 
or die("unexpected error");

//gWe made the search
$sql = "SELECT * FROM Column WHERE A_Login='$username'";
mysqli_set_charset($conexion, "utf8"); 

if(!$result = mysqli_query($conexion, $sql)) die();

$clients = array();

$num_result = mysqli_num_rows($result);

    if ($num_result == 0) {
        $clients = array("error" => "true", "msg" => "We can't found this user", "data" => $username);
    } else {
        while($row = mysqli_fetch_array($result)) 
        { 
            $id=$row['ID'];
            $Name=$row['Name'];

            if ($row['A_Login'] == $username && $row['A_Password'] == $password){        
                $clients[] = array('id'=> $id, 'Name'=> $Name);
                } else {
                    $clients[] = array('error'=> "true", "msg" => "Incorrect data");
                    }

        }
    }

$close = mysqli_close($conexion) 
or die("Unespected error with DB");
  }
else {
    $clients = array("error" => "true", "msg" => "You must fill all fields", "username" => $username);
}   
//We build the JSON
$json_string = json_encode($clients);
echo $json_string;

?>

In a wordpress page I have this code, I build a form where if the user click the submit button call doLogin()

Read More
<script type="text/javascript"> function doLogin(){
    data = {username: jQuery("#user").val(), password: jQuery("#pass").val()}
    console.log(data);
    jQuery.ajax({
    type: "POST",
    url: "Mywebsiteurl.php",
    data: data,
    beforeSend: function(){

    },
    success: function(data){
        console.log(data);
        //var arr = JSON.parse(data);
        //$('#forma').html(data);

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("Error");
        console.log(textStatus);
        console.log(errorThrown);
    }
});
} </script>

I need to show in <div id="forma"> a kind of list usign html, for example:

Id: VALUE ID
Name: VALUE NAME

and more information…

When i try to print in my website the required information using $('#forma').html(data); I obtain error or just an empty space.

How can I fix it? thanks.

Related posts

2 comments

  1. In WordPress we need to hook the ajax hook to your check_user function here.

    add_action('wp_ajax_your_action_from_js', 'your_function');
    
    //Using ajax for non-logged users as well (PUBLIC)
    add_action('wp_ajax_nopriv_your_action_from_js', 'your_function');
    

    Check below code for how it is done regarding your context.

    In functions.php

    function check_user() {
        $username = $_REQUEST['username']; 
        $password = $_REQUEST['password'];    
    
        if (isset($username) && isset($password)) {
        //CONEXION
            $host="localhost";
            $user="DB_Username";
            $pass="DB_Password";
            $dbname="DB_Name";
    
        //Conexion
        $conexion = mysqli_connect($host, $user, $pass,$dbname) 
        or die("unexpected error");
    
        //gWe made the search
        $sql = "SELECT * FROM Column WHERE A_Login='$username'";
        mysqli_set_charset($conexion, "utf8"); 
    
        if(!$result = mysqli_query($conexion, $sql)) die();
    
        $clients = array();
    
        $num_result = mysqli_num_rows($result);
    
            if ($num_result == 0) {
                $clients = array("error" => "true", "msg" => "We can't found this user", "data" => $username);
            } else {
                while($row = mysqli_fetch_array($result)) 
                { 
                    $id=$row['ID'];
                    $Name=$row['Name'];
    
                    if ($row['A_Login'] == $username && $row['A_Password'] == $password){        
                        $clients[] = array('id'=> $id, 'Name'=> $Name);
                        } else {
                            $clients[] = array('error'=> "true", "msg" => "Incorrect data");
                            }
    
                }
            }
    
        $close = mysqli_close($conexion) 
        or die("Unespected error with DB");
          }
        else {
            $clients = array("error" => "true", "msg" => "You must fill all fields", "username" => $username);
        }   
        //We build the JSON
        $json_string = json_encode($clients);
        echo $json_string;
    }
    
    add_action('wp_ajax_check_user', 'check_user');
    
    //Using ajax for non-logged users as well (PUBLIC)
    add_action('wp_ajax_nopriv_check_user', 'check_user');
    

    In your JS called file.

    In the script the action is related to your _your_action_from_js. So action is needed for knowing where the ajax has to hit. In our case it executes our check_user and returns the appropriate values.

    <script type="text/javascript"> 
    function doLogin(){
        data = {action: 'check_user', username: jQuery("#user").val(), password: jQuery("#pass").val()}
        console.log(data);
        jQuery.ajax({
            type: "POST",
            url: ajax_url,
            data: data,
            beforeSend: function(){
    
        },
        success: function(data){
            console.log(data);
            //var arr = JSON.parse(data);
            //$('#forma').html(data);
    
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Error");
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
    } 
    </script>
    

    Reference Simple AJAX Form: http://wptheming.com/2013/07/simple-ajax-example/

    CODEX Reference: https://codex.wordpress.org/AJAX_in_Plugins

  2. WordPress has specific methods to enable ajax requests.

    // registering ajax request for Logged users
    add_action( 'wp_ajax_my_action', 'my_action_callback' );
    
    // registering ajax request also for public area
    add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' );
    
    function my_action_callback() 
    {
        // Your code here
    
        wp_die(); // this is required to terminate immediately and return a proper response
    }
    

    To call it:

    jQuery(document).ready(function($) {
        var data = {action: "my_action", username: jQuery("#user").val(), password: jQuery("#pass").val()}
    
        jQuery.ajax({
            url: '/wp-admin/admin-ajax.php',
            data: data,
            method: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(a,b,c) {
    
            }
        });
    });
    

    Source: https://codex.wordpress.org/AJAX_in_Plugins

Comments are closed.