Jquery

---

Step 1 craete Database and table
USE `classicmodels`;
DROP TABLE IF EXISTS `studentnames`;

CREATE TABLE `studentnames` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(100) DEFAULT NULL,
  `last_name` varchar(100) DEFAULT NULL,
  `position` varchar(100) DEFAULT NULL,
  `updated_at` datetime DEFAULT NULL,
  `created_at` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=latin1;

/*Data for the table `studentnames` */

insert  into `studentnames`(`id`,`first_name`,`last_name`,`position`,`updated_at`,`created_at`) 
    values (5,'aditya','mandal','admin',NULL,NULL),
     (7,'Rajesh','Kumar','developer',NULL,NULL),
     (8,'suresh','kumar','developer',NULL,NULL),
     (9,'kamal','kumar','designer',NULL,NULL),
     (10,'rajesh','kumar','tester',NULL,NULL),
     (11,'rajesh1','kumar1','designer',NULL,NULL),
     (12,'rajesh133','kumar188','tester',NULL,NULL),
     (13,'rajesh','kumar',NULL,'2018-05-20 13:41:30','2018-05-20 13:41:30'),
     (14,'rajesh1','kumar44',NULL,'2018-05-20 13:44:33','2018-05-20 13:44:33');

step 2 create index.php 
Select Position :
<select id="position" name="position">
    <option value="">Select</option>
    <option value="admin">admin</option>
    <option value="developer">developer</option>
    <option value="designer">designer</option>
</select>
<table id="member">
    <thead>
        <th>First name </th><th>Last name</th>
    </thead>
    <tbody>
        
    </tbody>
</table>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    $("#position").change(function(){
       var position = $("#position").val(); 
       $.ajax({
          type:'POST',
          data:{'position':position},
          url:'response.php',
          dataType:'json',
          success:function(jsonObject){
              var peopleData = "";
              for(var key in jsonObject){
                  if(jsonObject.hasOwnProperty(key)){
                      peopleData += "<tr>";
                      peopleData += "<td>"+ jsonObject[key]["first_name"]+"</td>";
                      peopleData += "<td>" + jsonObject[key]["last_name"]+"</td>";
                      peopleData += "</tr>";
                  }
              }
              $("#member tbody").html(peopleData);
          }
       });
    });
    
    
    
</script>

Step - 3  create server file 

<?php
  $position = $_POST["position"];
  $connection = mysqli_connect("localhost", "root", "", "classicmodels");
  $query = mysqli_query($connection,
           "SELECT * FROM studentnames WHERE position = '" . $position . "'");
  $dataArray = [];
  while ($row = mysqli_fetch_assoc($query)) {
    array_push($dataArray, [
      'first_name'   => $row['first_name'],
      'last_name' => $row['last_name']
    ]);
  }
  $dataArray = json_encode($dataArray);
  echo $dataArray;
?>
                                    

< Access Json Data in jquery in php pagination php mysql jquery >

Ask a question

• Question:

  {{questionlistdata.blog_question_description}}

  • Answer:

    {{answer.blog_answer_description  }}

  Replay to Question
  
  

(+91)-9910699802

Become A Member     Become A Teacher