Ajax JQuery and PHP Tutorial Step by Step

Example 1:

Syntax: How to take input from input box to jquey




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    
</head>
<body>


<div id="container" class="col-xs-6 col-xs-offset-3"> 
    <div class="row">
      <h2>Search Our Database</h2>
      <input class='form-control' type="text" name = 'search' id = 'search' placeholder='Search our inventory'>
 
      <br>
      <br>
      <h2 class="bg-success" id="result"> </h2>
    </div>  
 

 <script>
     
   $(document).ready(function(){ 
    $('#search').keyup(function(){
     
     var search = $('#search').val();
     alert(search);  
   });
});
 
 </script>
  

</body>
</html>

Example 2:

Syntax: HTML and Ajax Code: `index.php`



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    
</head>
<body>


<div id="container" class="col-xs-6 col-xs-offset-3"> 
    <div class="row">
      <h2>Search Our Database</h2>
      <input class='form-control' type="text" name = 'search' id = 'search' placeholder='Search our inventory'>
 
      <br>
      <br>
      <h2 class="bg-success" id="result">hfgh </h2>
    </div>  
 

</body>
</html>

 <script>
     
   $(document).ready(function(){ 
    $('#search').keyup(function(){
     
     var search = $('#search').val();
      // alert(search);  

      $.ajax({
        url: 'search.php',
        data: {search: search},
        type: 'POST',
        success: function(data){
            if(!data.error){
                $('#result').html(data);
            }
        }


      });
   });
});
 
 </script>

Syntax: PHP Code `search.php`



<?php

$search = $_POST['search'];

echo $search ;

?>

Example 3: Search from database

Table:

Syntax: It contains HTML and Ajax code `index.html`



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    
</head>
<body>


<div id="container" class="col-xs-6 col-xs-offset-3"> 
    <div class="row">
      <h2>Search in Database</h2>
      <input class='form-control' type="text" name = 'search' id = 'search' placeholder='Search our inventory'>
 
      <br>
      <br>
      <div id="result">  </div>
    </div>  
 

</body>
</html>

 <script>
     
   $(document).ready(function(){ 
    $('#search').keyup(function(){
     
     var search = $('#search').val();
      // alert(search);  

      $.ajax({
        url: 'search.php',
        data: {search: search},
        type: 'POST',
        success: function(data){
            if(!data.error){
                $('#result').html(data);
            }
        }


      });
   });
});
 
 </script>

Syntax: PHP code `search.php`



<?php

$connection = mysqli_connect('localhost', 'root', '','atnyla');

$search = $_POST['search'];


if(!empty($search)) {

$query = "SELECT * FROM usr WHERE name LIKE '$search%' ";
$search_query = mysqli_query($connection,$query);
$count = mysqli_num_rows($search_query);    

    
   if(!$search_query) {
   
   die('QUERY FAILED' . mysqli_error($connection));
   
   
   }
    
    
    
    if($count <= 0) {
    
     echo "Sorry we don't have that car available";
   
    
    } else {
    
    
    
     while($row = mysqli_fetch_array($search_query)) {
    
        $name = $row['name'];
        
        ?>
        
        <ul class='list-unstyled'>
            
        <?php
            
            echo "<li>{$name} -  present in database</li>"; 
            
          ?>  
        </ul> 
    
    
  <?php  } 
    
    }  
}  

?>