CRUD JQUERY AJAX API JSON PHP MYSQL

 <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script language="javascript">

   function showEditor(id)

   {

   $("#id").val(id);

   

   $.ajax({

type: "GET",

async:true,

url: 'crud.php',

data: {

cmd : 'edit',

id         : $("#id").val() 

},

success: function (results) {

dataArr = JSON.parse(results); 

$("#first_name").val(dataArr[0].first_name);

$("#last_name").val(dataArr[0].last_name);

$("#address").val(dataArr[0].address);

},

error: function (request, status, error) {

alert(request.responseText);

}

});

   

   

   

   }

   

   function addUser()

   {

$.ajax({

type: "GET",

async:true,

url: 'crud.php',

data: {

cmd : 'add',

first_name : $("#first_name").val(),

last_name  : $("#last_name").val(),

address    : $("#address").val(),

id         : $("#id").val() 

},

success: function (results) {

loadData();

},

error: function (request, status, error) {

alert(request.responseText);

}

});

$('.close').click();

   }

   

   function setDeletedId(id){

   

   $("#delete_id").val(id);

   }

   

   function deleteUser()

   {

$.ajax({

type: "GET",

async:true,

url: 'crud.php',

data: {

cmd : 'delete',

id  : $("#delete_id").val()

},

success: function (results) {

loadData();

},

error: function (request, status, error) {

alert(request.responseText);

}

});

$('.close').click(); 

   

   }

   

   function loadData()

   {

$.ajax({

type: "GET",

async:true,

url: 'crud.php',

data: {

cmd : 'load_data'

},

success: function (results) {

dataArr = JSON.parse(results); 

var str = '';

$("#id_body").html(str);   

for(i=0;i<dataArr.length;i++)

{

str += '<tr>'+

'<td>'+dataArr[i].first_name+'</td>'+

'<td>'+dataArr[i].last_name+'</td>'+

'<td>'+dataArr[i].address+'</td>'+

'<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" onClick="showEditor('+dataArr[i].id+');" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>'+

'<td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" onClick="setDeletedId('+dataArr[i].id+');" ><span class="glyphicon glyphicon-trash"></span></button></p></td>'+

  '</tr>';

}

  

$("#id_body").html(str);   

  

},

error: function (request, status, error) {

alert(request.responseText);

}

});

   

   }

   $(document).ready(function(){

     loadData();

   });

</script>


<div class="container">

  <div class="row">


    <div class="col-md-12">

      <h1>Users Table</h1>

       <div class="row">

         <div class="col-md-12">

           <b></b>

           <br>

           <a href="#edit" class="btn btn-success" data-toggle="modal" onClick="showEditor('');"><i class="material-icons"></i> <span>Add New User</span></a>

         </div>

       </div>

      <div class="table-responsive">



        <table id="mytable" class="table table-bordred table-striped">

          <thead>

                <th>First name</th>

                <th>Last name</th>

                <th>Address</th>

                <th>Edit</th>

                <th>Delete</th>

          </thead>

          <tbody id="id_body">


          </tbody>


        </table>


        <div class="clearfix"></div>

       

      </div>

    </div>

  </div>

</div>



<!---Add new-->

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>

        <h4 class="modal-title custom_align" id="Heading">Add</h4>

      </div>

      <div class="modal-body">

        <div class="form-group">

          <input class="form-control " type="text"  id="first_name" placeholder="First name">

        </div>

        <div class="form-group">

          <input class="form-control " type="text" id="last_name" placeholder="Last name">

        </div>

        <div class="form-group">

          <input class="form-control " type="text" id="address" placeholder="Address">

        </div>

      </div>

      <div class="modal-footer ">

        <input type="hidden" id="id">

        <button type="button" class="btn btn-warning btn-lg" style="width: 100%;" onClick="addUser()"><span class="glyphicon glyphicon-ok-sign"></span>Add</button>

      </div>

    </div>

    <!-- /.modal-content -->

  </div>

  <!-- /.modal-dialog -->

</div>





<!--Delete-->

<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>

        <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>

      </div>

      <div class="modal-body">


        <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>


      </div>

      <div class="modal-footer ">

        <input type="hidden" id="delete_id">

        <button type="button" class="btn btn-success" onClick="deleteUser();"><span class="glyphicon glyphicon-ok-sign"></span>Yes</button>

        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>No</button>

      </div>

    </div>

    <!-- /.modal-content -->

  </div>

  <!-- /.modal-dialog -->

</div>


////////////////////////////////////


<?php

    include("connection.php");

  $cmd = $_REQUEST['cmd'];

switch($cmd){

case "add":

  if(empty($_REQUEST['id']))

{

///Insertion

$sql = "INSERT INTO `users` (`first_name`, `last_name`, `address`)

VALUES ('".$_REQUEST['first_name']."', '".$_REQUEST['last_name']."', '".$_REQUEST['address']."');";

}

else

{

$sql = "update `users` set `first_name`='".$_REQUEST['first_name']."', 

`last_name`='".$_REQUEST['last_name']."', 

`address`='".$_REQUEST['address']."' WHERE id='".$_REQUEST['id']."'";

}

 

$result = $conn->query($sql); 

break;

     case "edit":

   //retrive data

$sql = "SELECT * FROM users where id='".$_REQUEST['id']."'";

$result = $conn->query($sql);

if ($result->num_rows > 0) {

// output data of each row

$i=-1;

while($row = $result->fetch_assoc()) {

$i++;

$arr[$i]['id'] = $row["id"];

$arr[$i]['first_name'] = $row["first_name"];

$arr[$i]['last_name'] = $row["last_name"];

$arr[$i]['address'] = $row["address"];

}

} else {

echo "0 results";

}

$conn->close();

echo json_encode($arr);

/////////////////////////////// 

break;

 

case "delete": 

   //retrive data

$sql = "Delete FROM users where id='".$_REQUEST['id']."'";

$result = $conn->query($sql);

$conn->close();

///////////////////////////////

    break;  

case "load_data": 

    //load all data

$sql = "SELECT * FROM users ORDER BY id DESC";

$result = $conn->query($sql);

if ($result->num_rows > 0) {

// output data of each row

$i=-1;

while($row = $result->fetch_assoc()) {

$i++;

$arr[$i]['id'] = $row["id"];

$arr[$i]['first_name'] = $row["first_name"];

$arr[$i]['last_name'] = $row["last_name"];

$arr[$i]['address'] = $row["address"];

}

  }

echo json_encode($arr);

break;  

default:

    //load all data

$all_data = load_data($conn);

echo json_encode($all_data);

break;    

}

?>


//////////////////////////////////


<?php

////mysql datbase connection

$servername = "localhost";

$username = "root";

$password = "secret";

$db = "tutorial_ajax2_test";

// Create connection

$conn = new mysqli($servername, $username, $password,$db);

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

?>

Comentarios

Publicar un comentario

Entradas populares de este blog

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario HTML: html Copy code <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

DETECTAR DIRECCION IP CON PHP Y JS

  Para detectar la IP real del visitante de una página web, puedes hacerlo tanto con PHP como con JavaScript, aunque PHP es más confiable ya que JavaScript ejecuta en el lado del cliente y puede ser manipulado. 1. Detectar la IP con PHP PHP es la mejor opción para obtener la IP, ya que corre en el servidor y no depende del navegador. Sin embargo, la IP obtenida puede estar detrás de un proxy, así que se pueden usar varios encabezados HTTP. php function obtenerIP() {     if (!empty($_SERVER['HTTP_CLIENT_IP'])) {         // IP desde el compartido de Internet         return $_SERVER['HTTP_CLIENT_IP'];     } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {         // IP detrás de un proxy         return $_SERVER['HTTP_X_FORWARDED_FOR'];     } else {         // IP real del usuario         return $_SERVER['REMOTE_ADDR'];     } ...
Leer más