Search Database using JQuery AJAX

Hi Friends today we are going to learn how to get data from database without refreshing the page or search database using jquery ajax and php..
just follow the below technique to get data from database without refreshing the page using jquery,ajax and php..

=>Database Structure:
Database Name: codenair
Table Name: topic
-- Table structure for table `topic`

CREATE TABLE IF NOT EXISTS `topic` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `content` longtext NOT NULL,
  `author` varchar(50) NOT NULL,
  `views` int(100) NOT NULL
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

-- Dumping data for table `topic`

INSERT INTO `topic` (`id`, `title`, `content`, `author`, `views`) VALUES
(6, 'How to Install CakePHP', 'How to Install CakePHP..How to Install CakePHP..How to Install CakePHP..How to Install CakePHP..How to Install CakePHP..', 'priya', 6556),
(5, 'How to Install Laravel', 'How to Install Laravel..How to Install Laravel..How to Install Laravel..How to Install Laravel..How to Install Laravel..', 'anjan', 4247),
(3, 'How to Install windows 7', 'this is How to Install windows 7this is How to Install windows 7this is How to Install windows 7this is How to Install windows 7this is How to Install windows 7', 'anjan', 2524),
(4, 'How to Install windows XP', 'This is how to Install windows xp.This is how to Install windows xp.This is how to Install windows xp.This is how to Install windows xp.This is how to Install windows xp.', 'raj', 1230),
(2, 'php mysql insert', 'This is php mysql insert tutorials.This is php mysql insert tutorials.This is php mysql insert tutorials.This is php mysql insert tutorials.This is php mysql insert tutorials.', 'Mahindra', 250);

Create 4 files named..
1. index.html
2. script.js
3. search.php
4. style.css
now copy and save the below codes for different file..
1. index.html

<html>
<head>
<title>AJAX Simple Search PHP MySQL Without Page Refresh</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<div id="wrapper">
  <table>
     <tr>
    <td><b>Search For:</b></td>
    <td><input type="text" id="term"/></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="button" id="submit" value="Search"/></td>
  </tr>
  </table>
<div id="success"></div>
</div>
</html>

2. script.js

$(document).ready(function(){
 $("#submit").click(function(){
  var term=$("#term").val();
  if(term==""){
   alert("Your Search Term is Empty");
  }else{
   $.ajax({
    url:"search.php",
    type:"POST",
    data:{term:term},
    success: function(data){
     $("#success").html(data);
    }
   });
  }
 });
});

3. search.php

<?php
  $conn=new mysqli('localhost','root','','codenair');
    $term=mysqli_real_escape_string($conn,$_POST['term']);
 if(empty($_POST['term'])){
  echo '<font style=color:indigo size=5>Please Type any Word</span>';
 }else{
 $result=mysqli_query($conn,"SELECT*FROM topic WHERE title like '%$term%' or content like '%$term%'");
 $count=$result->num_rows;
 if($count==0){
  echo '<font style=color:red size=5>No Result Found</span>';
 }else{
 while($row=$result->fetch_array()){?>
  <div id="content">
       <h3><?php echo $row['title'];?></h3>
    <p><?php echo $row['content'];?></p>
       
     </div>
 
 <?php }} }?>

4. style.css

#wrapper{
 background:#85adad;
 margin:auto;
 width:600px;
 border-radius:4px;
 min-height:300px;
 max-height:600px;
}
#content{
 width:500px;
 background:#ccc;
}
#form{
 background:#ddd;
 width:500px;
 margin:auto;
}
h3{
 background:black;
 color:white;
}
input[type=text]{
 padding:5px;
 border-radius:4px;
 width:250px;
 font-size:20px;
}
input[type=button]{
 padding:5px;
 border-radius:4px;
 background:black;
 color:white;
 cursor:pointer;
 font-weight:bold;
}

That's it Friends how to get data from database without refreshing the page..
Thank You for Visiting...
also learn..
1. PHP AJAX Live Search
2. AJAX load data from database without page refresh
3. PHP Simple Login With AJAX
4. Delete Records From database Without Page Refresh

Latest

Wednesday, February 28, 2018

Search Database using JQuery AJAX