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

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.