what is ajax in data: mean?
what is ajax in data: mean?
<?php $conn = new mysqli('localhost', 'root', '', 'db_crud'); if(!$conn){ } ?>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a> </div> </nav> <div class="col-md-3"></div> <div class="col-md-6 well"> <h3 class="text-primary">PHP - Simple CRUD With Ajax/MySQLi</h3> <hr style="border-top:1px dotted #ccc;"/> <form method="POST"> <div class="form-inline"> <label>Firstname</label> <input type="text" id="firstname" class="form-control"/> <label>Lastname</label> <input type="text" id="lastname" class="form-control"/> </div> <br /> <div class="form-inline"> <label>Address</label> <input type="text" id="address" class="form-control"/> </div> <br /> <center><button type="button" id="save" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Save</button><button type="button" id="update" class="btn btn-warning"><span class="glyphicon glyphicon-edit"></span> Update</button></center> </form> <br /> <table class="table table-bordered"> <thead> <tr> <th>Name</th> <th>Address</th> <th>Action</th> </tr> </thead> <tbody id="data"></tbody> </table> </div> </body> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/script.js"></script> </html>
<?php require_once 'conn.php'; $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; $address = $_POST['address']; $conn->query("INSERT INTO `member` VALUES('', '$firstname', '$lastname', '$address')"); ?>
<?php require_once 'conn.php'; $query = $conn->query("SELECT * FROM `member`"); while($fetch = $query->fetch_array()){ echo " <tr> <td>".$fetch['firstname']." ".$fetch['lastname']."</td> <td>".$fetch['address']."</td> <td><center><button class='btn btn-warning edit' name='".$fetch['mem_id']."'><span class='glyphicon glyphicon-edit'></span> Edit</button> | <button class='btn btn-danger delete' name='".$fetch['mem_id']."'><span class='glyphicon glyphicon-trash'></span> Delete</button></center></td> </tr> "; } } ?>
<?php require_once 'conn.php'; $id = $_POST['id']; $conn->query("DELETE FROM `member` WHERE `mem_id` = '$id'"); ?>
<?php require_once 'conn.php'; $id = $_POST['id']; $query = $conn->query("SELECT * FROM `member` WHERE `mem_id` ='$id'"); $fetch = $query->fetch_array(); 'mem_id' => $fetch['mem_id'], 'firstname' => $fetch['firstname'], 'lastname' => $fetch['lastname'], 'address' => $fetch['address'] ); } ?>
<?php require_once 'conn.php'; $id = $_POST['id']; $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; $address = $_POST['address']; $conn->query("UPDATE `member` set `firstname` = '$firstname', `lastname` = '$lastname', `address` = '$address' WHERE `mem_id` = '$id'"); } ?>
$(document).ready(function(){ var mem_id; DisplayData(); $('#update').hide(); $('#save').on('click', function(){ if($('#firstname').val() == "" || $('#lastname').val() == "" || $('#address').val() == ""){ alert("Hello World"); }else{ var firstname = $('#firstname').val(); var lastname = $('#lastname').val(); var address = $('#address').val(); $.ajax({ url: 'save_query.php', type: 'POST', data: { firstname: firstname, lastname: lastname, address: address }, success: function(data){ $('#firstname').val(''); $('#lastname').val(''); $('#address').val(''); DisplayData(); } }); } }); function DisplayData(){ $.ajax({ url: 'data_query.php', type: 'POST', data: { res: 1 }, success: function(response){ $('#data').html(response); } }) } $(document).on('click', '.delete', function(){ var id = $(this).attr('name'); $.ajax({ url: 'delete_query.php', type: 'POST', data: { id: id }, success: function(data){ DisplayData(); $('#update').hide(); $('#save').show(); $('#firstname').val(''); $('#lastname').val(''); $('#address').val(''); } }); }) $(document).on('click', '.edit', function(){ var id = $(this).attr('name'); $.ajax({ url: 'edit.php', type: 'POST', data: { id: id }, success: function(response){ var getArray = jQuery.parseJSON(response); mem_id = getArray.mem_id; $('#firstname').val(getArray.firstname); $('#lastname').val(getArray.lastname); $('#address').val(getArray.address); $('#update').show(); $('#save').hide(); } }) }); $('#update').on('click', function(){ var firstname = $('#firstname').val(); var lastname = $('#lastname').val(); var address = $('#address').val(); $.ajax({ url: 'update_query.php', type: 'POST', data: { id: mem_id, firstname: firstname, lastname: lastname, address: address }, success: function(){ DisplayData(); $('#firstname').val(''); $('#lastname').val(''); $('#address').val(''); alert("Successfully Updated!"); $('#update').hide(); $('#save').show(); mem_id = ""; } }); }); });