Comment Remplir Automatiquement Dropdown Avec JavaScript AJAX Et PHP

La liste déroulante dépendante dynamique restreint la sélection de l'utilisateur en fonction de la sélection précédente de la liste déroulante.

Dans ce tutoriel, je montre comment vous pouvez remplir automatiquement la liste déroulante avec les données de la base de données MySQL en utilisant JavaScript et PHP.

1. Structure du tableau

J'utilise 3 tables dans l'exemple -

table des pays (Enregistrer les enregistrements des pays) –

CREATE TABLE countries (
  id serial PRIMARY KEY,
  name varchar(80) NOT NULL
)

table des états (États du magasin des pays) –

CREATE TABLE states (
  id serial PRIMARY KEY,
  name varchar(80) NOT NULL,
  country_id bigint NOT NULL
)

table des villes (Mémoriser les villes des états) –

CREATE TABLE cities (
  id serial PRIMARY KEY,
  name varchar(80) NOT NULL,
  state_id bigint NOT NULL
)

---

2. Configuration

Créez un nouveau config.phpfichier.

Code terminé

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = "root"; /* Password */$dbname = "tutorial"; /* Database name */
// Create connection
$con = new mysqli($host, $user, $password, $dbname);

// Check connection
if ($con->connect_error) {
   die("Connection failed: " . $con->connect_error);
}

---

3.HTML

Récupérer tous les enregistrements de la countries table et créer 3  <select> éléments -

• Le premier  <select > élément est d'afficher les fichiers récupérés  countries.
• La deuxième est utilisée pour afficher les états en fonction de la sélection du pays à l'aide de JavaScript AJAX, et
• La troisième est utilisée pour afficher les villes en fonction de la sélection de l'état à l'aide de JavaScript AJAX.

Code terminé

<?php
include "config.php";

// Fetch countries
$sql = "SELECT * from countries order by name";
$stmt = $con->prepare($sql); 
$stmt->execute();
$result = $stmt->get_result();

?>
<table>
   <tr>
      <td>Country</td>
      <td>
         <select id="country" onchange="getStates(this.value);">
            <option value="0" >– Select Country –</option>
            <?php
            while ($row = $result->fetch_assoc() ){

               $id = $row['id'];
               $name = $row['name'];

               echo "<option value='".$id."' >".$name."</option>";
            }
            ?>
         </select>
      </td>
   </tr>

   <tr>
      <td>State</td>
      <td>
         <select id="state" onchange="getCities(this.value);" >
            <option value="0" >– Select State –</option>
         </select>
      </td>
   </tr>

   <tr>
      <td>City</td>
      <td>
         <select id="city" >
            <option value="0" >– Select City –</option>
         </select>
      </td>
   </tr>
</table>

---

4.PHP

Créer  ajaxfile.php un fichier.

Traiter 2 requêtes AJAX –

• Si $request == 'getStates' -  Récupérer les enregistrements de  states la table en fonction de la  $country_id valeur et les affecter à  $result. Bouclez  $result et initialisez  $data Array avec les   touches id et  .name

Retour  $data au format JSON.

• Si $request == 'getCities' - Récupérer les  enregistrements de  cities la table en fonction de la  $state_id valeur et les attribuer à  $result. Bouclez  $result et initialisez  $data Array avec les   touches id et  .name

Retour  $data au format JSON.

Code terminé

<?php
include 'config.php';

// Read POST data
$postData = json_decode(file_get_contents("php://input"));
$request = "";
if(isset($postData->request)){
   $request = $postData->request;
}

// Get states
if($request == 'getStates'){
   $country_id = 0;
   $result = array();$data = array();

   if(isset($postData->country_id)){
       $country_id = $postData->country_id;

       $sql = "SELECT * from states WHERE country_id=?";
       $stmt = $con->prepare($sql); 
       $stmt->bind_param("i", $country_id);
       $stmt->execute();
       $result = $stmt->get_result();

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

          $id = $row['id'];
          $name = $row['name'];

          $data[] = array(
             "id" => $id,
             "name" => $name
          );

       }

   }

   echo json_encode($data);
   die;

}

// Get cities
if($request == 'getCities'){
   $state_id = 0;
   $result = array();$data = array();

   if(isset($postData->state_id)){
      $state_id = $postData->state_id;

      $sql = "SELECT * from cities WHERE state_id=?";
      $stmt = $con->prepare($sql); 
      $stmt->bind_param("i", $state_id);
      $stmt->execute();
      $result = $stmt->get_result();

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

         $id = $row['id'];
         $name = $row['name'];

         $data[] = array(
            "id" => $id,
            "name" => $name
         );

      }
   }

   echo json_encode($data);
   die;
}

---

5. Javascript

Créer 2 fonctions –

• getStates() - Cette fonction appelle lorsque la sélection est modifiée dans la liste déroulante des pays.

Liste déroulante vide de l'état et de la ville. Envoyez la requête AJAX POST à  ajaxfile.php​​, passez  {request: 'getStates', country_id: country_id} en tant que  dataet définissez  dataType: 'json'.

En cas de réussite de la boucle de rappel  response et de l'ajout  <option >dans la liste déroulante d'état.

• getCities() - Cette fonction appelle lorsque la sélection est modifiée dans la liste déroulante d'état.

Videz la #city liste déroulante et envoyez la requête AJAX POST à  ajaxfile.php​​, passez  {request: 'getCities', state_id: state_id} en tant que  dataet définissez  dataType: 'json'.

En cas de rappel réussi, bouclez  response et ajoutez  <option >dans la liste déroulante de la ville.

Code terminé

function getStates(country_id){

   // Empty the dropdown
   var stateel = document.getElementById('state');
   var cityel = document.getElementById('city');

   stateel.innerHTML = "";
   cityel.innerHTML = "";

   var stateopt = document.createElement('option');
   stateopt.value = 0;
   stateopt.innerHTML = '-- Select State --';
   stateel.appendChild(stateopt);

   var cityopt = document.createElement('option');
   cityopt.value = 0;
   cityopt.innerHTML = '-- Select City --';
   cityel.appendChild(cityopt);

   // AJAX request
   var xhttp = new XMLHttpRequest();
   xhttp.open("POST", "ajaxfile.php", true); 
   xhttp.setRequestHeader("Content-Type", "application/json");
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // Response
         var response = JSON.parse(this.responseText);

         var len = 0;
         if(response != null){
            len = response.length;
         }

         if(len > 0){
            // Read data and create <option >
            for(var i=0; i<len; i++){

               var id = response[i].id;
               var name = response[i].name;

               // Add option to state dropdown
               var opt = document.createElement('option');
               opt.value = id;
               opt.innerHTML = name;
               stateel.appendChild(opt);

            }
         }
      }
   };
   var data = {request:'getStates',country_id: country_id};
   xhttp.send(JSON.stringify(data));

}

function getCities(state_id){

   // Empty the dropdown
   var cityel = document.getElementById('city');

   cityel.innerHTML = "";

   var cityopt = document.createElement('option');
   cityopt.value = 0;
   cityopt.innerHTML = '-- Select City --';
   cityel.appendChild(cityopt);

   // AJAX request
   var xhttp = new XMLHttpRequest();
   xhttp.open("POST", "ajaxfile.php", true); 
   xhttp.setRequestHeader("Content-Type", "application/json");
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // Response
         var response = JSON.parse(this.responseText);

         var len = 0;
         if(response != null){
            len = response.length;
         }

         if(len > 0){
            // Read data and create <option >
            for(var i=0; i<len; i++){

               var id = response[i].id;
               var name = response[i].name;

               // Add option to city dropdown
               var opt = document.createElement('option');
               opt.value = id;
               opt.innerHTML = name;
               cityel.appendChild(opt);

            }
         }
      }
   };
   var data = {request:'getCities',state_id: state_id};
   xhttp.send(JSON.stringify(data));
}

---

6. Démo

Voir la démo

---

7. Conclusion

Suivez les mêmes étapes pour remplir automatiquement plusieurs listes déroulantes.

Si les données ne s'affichent pas dans la liste déroulante lorsque vous sélectionnez un pays ou un état, utilisez l'onglet réseau du navigateur pour déboguer. Vérifiez à nouveau les requêtes SQL et les valeurs POST.

Source :  https://makitweb.com

#php #javascript #ajax 

What is GEEK

Buddha Community

Comment Remplir Automatiquement Dropdown Avec JavaScript AJAX Et PHP

La liste déroulante dépendante dynamique restreint la sélection de l'utilisateur en fonction de la sélection précédente de la liste déroulante.

Dans ce tutoriel, je montre comment vous pouvez remplir automatiquement la liste déroulante avec les données de la base de données MySQL en utilisant JavaScript et PHP.

1. Structure du tableau

J'utilise 3 tables dans l'exemple -

table des pays (Enregistrer les enregistrements des pays) –

CREATE TABLE countries (
  id serial PRIMARY KEY,
  name varchar(80) NOT NULL
)

table des états (États du magasin des pays) –

CREATE TABLE states (
  id serial PRIMARY KEY,
  name varchar(80) NOT NULL,
  country_id bigint NOT NULL
)

table des villes (Mémoriser les villes des états) –

CREATE TABLE cities (
  id serial PRIMARY KEY,
  name varchar(80) NOT NULL,
  state_id bigint NOT NULL
)

---

2. Configuration

Créez un nouveau config.phpfichier.

Code terminé

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = "root"; /* Password */$dbname = "tutorial"; /* Database name */
// Create connection
$con = new mysqli($host, $user, $password, $dbname);

// Check connection
if ($con->connect_error) {
   die("Connection failed: " . $con->connect_error);
}

---

3.HTML

Récupérer tous les enregistrements de la countries table et créer 3  <select> éléments -

• Le premier  <select > élément est d'afficher les fichiers récupérés  countries.
• La deuxième est utilisée pour afficher les états en fonction de la sélection du pays à l'aide de JavaScript AJAX, et
• La troisième est utilisée pour afficher les villes en fonction de la sélection de l'état à l'aide de JavaScript AJAX.

Code terminé

<?php
include "config.php";

// Fetch countries
$sql = "SELECT * from countries order by name";
$stmt = $con->prepare($sql); 
$stmt->execute();
$result = $stmt->get_result();

?>
<table>
   <tr>
      <td>Country</td>
      <td>
         <select id="country" onchange="getStates(this.value);">
            <option value="0" >– Select Country –</option>
            <?php
            while ($row = $result->fetch_assoc() ){

               $id = $row['id'];
               $name = $row['name'];

               echo "<option value='".$id."' >".$name."</option>";
            }
            ?>
         </select>
      </td>
   </tr>

   <tr>
      <td>State</td>
      <td>
         <select id="state" onchange="getCities(this.value);" >
            <option value="0" >– Select State –</option>
         </select>
      </td>
   </tr>

   <tr>
      <td>City</td>
      <td>
         <select id="city" >
            <option value="0" >– Select City –</option>
         </select>
      </td>
   </tr>
</table>

---

4.PHP

Créer  ajaxfile.php un fichier.

Traiter 2 requêtes AJAX –

• Si $request == 'getStates' -  Récupérer les enregistrements de  states la table en fonction de la  $country_id valeur et les affecter à  $result. Bouclez  $result et initialisez  $data Array avec les   touches id et  .name

Retour  $data au format JSON.

• Si $request == 'getCities' - Récupérer les  enregistrements de  cities la table en fonction de la  $state_id valeur et les attribuer à  $result. Bouclez  $result et initialisez  $data Array avec les   touches id et  .name

Retour  $data au format JSON.

Code terminé

<?php
include 'config.php';

// Read POST data
$postData = json_decode(file_get_contents("php://input"));
$request = "";
if(isset($postData->request)){
   $request = $postData->request;
}

// Get states
if($request == 'getStates'){
   $country_id = 0;
   $result = array();$data = array();

   if(isset($postData->country_id)){
       $country_id = $postData->country_id;

       $sql = "SELECT * from states WHERE country_id=?";
       $stmt = $con->prepare($sql); 
       $stmt->bind_param("i", $country_id);
       $stmt->execute();
       $result = $stmt->get_result();

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

          $id = $row['id'];
          $name = $row['name'];

          $data[] = array(
             "id" => $id,
             "name" => $name
          );

       }

   }

   echo json_encode($data);
   die;

}

// Get cities
if($request == 'getCities'){
   $state_id = 0;
   $result = array();$data = array();

   if(isset($postData->state_id)){
      $state_id = $postData->state_id;

      $sql = "SELECT * from cities WHERE state_id=?";
      $stmt = $con->prepare($sql); 
      $stmt->bind_param("i", $state_id);
      $stmt->execute();
      $result = $stmt->get_result();

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

         $id = $row['id'];
         $name = $row['name'];

         $data[] = array(
            "id" => $id,
            "name" => $name
         );

      }
   }

   echo json_encode($data);
   die;
}

---

5. Javascript

Créer 2 fonctions –

• getStates() - Cette fonction appelle lorsque la sélection est modifiée dans la liste déroulante des pays.

Liste déroulante vide de l'état et de la ville. Envoyez la requête AJAX POST à  ajaxfile.php​​, passez  {request: 'getStates', country_id: country_id} en tant que  dataet définissez  dataType: 'json'.

En cas de réussite de la boucle de rappel  response et de l'ajout  <option >dans la liste déroulante d'état.

• getCities() - Cette fonction appelle lorsque la sélection est modifiée dans la liste déroulante d'état.

Videz la #city liste déroulante et envoyez la requête AJAX POST à  ajaxfile.php​​, passez  {request: 'getCities', state_id: state_id} en tant que  dataet définissez  dataType: 'json'.

En cas de rappel réussi, bouclez  response et ajoutez  <option >dans la liste déroulante de la ville.

Code terminé

function getStates(country_id){

   // Empty the dropdown
   var stateel = document.getElementById('state');
   var cityel = document.getElementById('city');

   stateel.innerHTML = "";
   cityel.innerHTML = "";

   var stateopt = document.createElement('option');
   stateopt.value = 0;
   stateopt.innerHTML = '-- Select State --';
   stateel.appendChild(stateopt);

   var cityopt = document.createElement('option');
   cityopt.value = 0;
   cityopt.innerHTML = '-- Select City --';
   cityel.appendChild(cityopt);

   // AJAX request
   var xhttp = new XMLHttpRequest();
   xhttp.open("POST", "ajaxfile.php", true); 
   xhttp.setRequestHeader("Content-Type", "application/json");
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // Response
         var response = JSON.parse(this.responseText);

         var len = 0;
         if(response != null){
            len = response.length;
         }

         if(len > 0){
            // Read data and create <option >
            for(var i=0; i<len; i++){

               var id = response[i].id;
               var name = response[i].name;

               // Add option to state dropdown
               var opt = document.createElement('option');
               opt.value = id;
               opt.innerHTML = name;
               stateel.appendChild(opt);

            }
         }
      }
   };
   var data = {request:'getStates',country_id: country_id};
   xhttp.send(JSON.stringify(data));

}

function getCities(state_id){

   // Empty the dropdown
   var cityel = document.getElementById('city');

   cityel.innerHTML = "";

   var cityopt = document.createElement('option');
   cityopt.value = 0;
   cityopt.innerHTML = '-- Select City --';
   cityel.appendChild(cityopt);

   // AJAX request
   var xhttp = new XMLHttpRequest();
   xhttp.open("POST", "ajaxfile.php", true); 
   xhttp.setRequestHeader("Content-Type", "application/json");
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // Response
         var response = JSON.parse(this.responseText);

         var len = 0;
         if(response != null){
            len = response.length;
         }

         if(len > 0){
            // Read data and create <option >
            for(var i=0; i<len; i++){

               var id = response[i].id;
               var name = response[i].name;

               // Add option to city dropdown
               var opt = document.createElement('option');
               opt.value = id;
               opt.innerHTML = name;
               cityel.appendChild(opt);

            }
         }
      }
   };
   var data = {request:'getCities',state_id: state_id};
   xhttp.send(JSON.stringify(data));
}

---

6. Démo

Voir la démo

---

7. Conclusion

Suivez les mêmes étapes pour remplir automatiquement plusieurs listes déroulantes.

Si les données ne s'affichent pas dans la liste déroulante lorsque vous sélectionnez un pays ou un état, utilisez l'onglet réseau du navigateur pour déboguer. Vérifiez à nouveau les requêtes SQL et les valeurs POST.

Source :  https://makitweb.com

#php #javascript #ajax 

PHP jQuery Ajax Post Form Data Example

PHP jquery ajax POST request with MySQL. In this tutorial, you will learn how to create and submit a simple form in PHP using jQuery ajax post request. And how to submit a form data into MySQL database without the whole page refresh or reload. And also you will learn how to show an error message to the user if the user does not fill any form field.

And this tutorial also guide on how to send data to MySQL database using AJAX + jQuery + PHP without reloading the whole page and show a client-side validation error message if it has an error in the form.

PHP jQuery AJAX POST Form Data In Into MySQL DB Example

Just follow the few below steps and easily create and submit ajax form in PHP and MySQL with client-side validation.

• Create Database And Table
• Create a Database Connection File
• Create An Ajax POST Form in PHP
• Create An Ajax Data Store File

https://www.tutsmake.com/php-jquery-ajax-post-tutorial-example/

#jquery ajax serialize form data example #submit form using ajax in php example #save form data using ajax in php #how to insert form data using ajax in php #php jquery ajax form submit example #jquery ajax and jquery post form submit example with php

Country State City Dropdown list in PHP MySQL PHP

Here, i will show you how to populate country state city in dropdown list in php mysql using ajax.

Country State City Dropdown List in PHP using Ajax

You can use the below given steps to retrieve and display country, state and city in dropdown list in PHP MySQL database using jQuery ajax onchange:

• Step 1: Create Country State City Table
• Step 2: Insert Data Into Country State City Table
• Step 3: Create DB Connection PHP File
• Step 4: Create Html Form For Display Country, State and City Dropdown
• Step 5: Get States by Selected Country from MySQL Database in Dropdown List using PHP script
• Step 6: Get Cities by Selected State from MySQL Database in DropDown List using PHP script

https://www.tutsmake.com/country-state-city-database-in-mysql-php-ajax/

#country state city drop down list in php mysql #country state city database in mysql php #country state city drop down list using ajax in php #country state city drop down list using ajax in php demo #country state city drop down list using ajax php example #country state city drop down list in php mysql ajax

Comment Envoyer Une Requête GET et POST AJAX avec JavaScript et PHP

AJAX est le seul moyen qui permet de communiquer côté client avec le côté serveur.

Il est plus facile d'envoyer des requêtes AJAX à l'aide de bibliothèques ou de frameworks JavaScript. Mais il est également bon de savoir comment envoyer une requête AJAX avec du Javascript simple.

Utilisez l'objet XMLHttpRequest pour communiquer avec le serveur.

Dans ce tutoriel, je montre comment vous pouvez envoyer des requêtes GET et POST AJAX avec JavaScript et gérer la requête avec PHP.

1. Structure du tableau

Créer employeeune table et ajouter des enregistrements.

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(80) NOT NULL, 
  `salary` varchar(20) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

---

2. Configuration

Créez un config.phppour la connexion à la base de données.

Code terminé

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

---

3.HTML

Créez 3 éléments de texte d'entrée pour saisir le nom, le salaire et l'e-mail. Et un élément de bouton.

Ajout onclickd'un événement sur le bouton qui appelle insertNewEmployee()la fonction.

Répertorier les enregistrements dans l' <table id='emptTable'>utilisation de JavaScript et AJAX.

Code terminé

<div>
   Name: <input type="text" id='txt_name'> <br>
   Salary: <input type="text" id='txt_salary'> <br>
   Email: <input type="text" id='txt_email'> <br>
   <input type="button" id="btn_submit" value="Submit" onclick="insertNewEmployee();">
</div>
<table id='empTable' border='1'>
  <thead>
    <tr>
      <th>Name</th>
      <th>Salary</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

---

4.PHP

Créer 'ajaxfile.php'un fichier pour gérer la requête AJAX.

Par exemple, je gère les requêtes GET et POST dans un seul fichier.

Attribué 2 à $request.

Requête GET (récupérer des enregistrements)

Vérifiez si $_GET['request']est défini ou non, puis attribuez $_GET['request']-le à $request.

Si $request == 1alors récupérez tous les enregistrements de employeela table et attribuez-les à $employeeData. Boucle sur les enregistrements récupérés.

Initialisez $responseavec les clés id, emp_name, salaire et e-mail.

Renvoie $responseun tableau au format JSON.

Requête POST (insérer un enregistrement)

Si $request == 2alors lisez les valeurs POST en utilisant json_decode(file_get_contents("php://input")).

Attribuer des valeurs aux variables et préparer la requête INSERT.

Si la requête INSERT est exécutée avec succès, retournez 1sinon 0.

Code terminé

<?php

include "config.php";

$request = 2;

// Read $_GET value
if(isset($_GET['request'])){
   $request = $_GET['request'];
}

// Fetch records 
if($request == 1){

   // Select record 
   $sql = "SELECT * FROM employee";
   $employeeData = mysqli_query($con,$sql);

   $response = array();
   while($row = mysqli_fetch_assoc($employeeData)){
      $response[] = array(
         "id" => $row['id'],
         "emp_name" => $row['emp_name'],
         "salary" => $row['salary'],
         "email" => $row['email'],
      );
   }

   echo json_encode($response);
   exit;
}

// Insert record
if($request == 2){

   // Read POST data
   $data = json_decode(file_get_contents("php://input"));

   $name = $data->name;
   $salary = $data->salary;
   $email = $data->email;

   // Insert record
   $sql = "insert into employee(emp_name,salary,email) values('".$name."',".$salary.",'".$email."')";
   if(mysqli_query($con,$sql)){
      echo 1; 
   }else{
      echo 0;
   }

   exit;
}

---

5. JavaScript

Utilisez XMLHttpRequestl'objet pour envoyer une requête AJAX.

.open () - Les méthodes prennent 3 paramètres -

1. Méthode de requête – GET ou POST.
2. Chemin du fichier AJAX. Passer le paramètre avec l'URL sur la requête GET – ajaxfile.php?name=yogesh&city=bhopal.
3. C'est un paramètre facultatif qui prend une valeur booléenne trueou false. La valeur par défaut est true. Passe truepour requête asynchrone et falsepour requête synchrone.

.setRequestHeader() – Cette méthode est utilisée pour définir Content-Type. Par défaut, 'application/x-www-form-urlencoded'le type de contenu est défini. Vous pouvez modifier sa valeur, par exemple – application/json,  multipart/form-data, etc.

.onreadystatechange - Cette propriété appelle le changement d'état de la demande. Attribuez une fonction anonyme pour traiter la réponse. Si this.readyState == 4 && this.status == 200signifie que la réponse du serveur est prête à être traitée.

.send() - Cette méthode envoie une requête AJAX. Il est également utilisé pour envoyer des données.

• Syntaxe GET –

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajaxfile.php?request=1", true);
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {

      // Response
      var response = this.responseText; 

   }
};
xhttp.send();

Syntaxe ci-dessus avec jQuery

$.ajax({ url : 'ajaxfile.php?request=1', type : 'get', success : function(response){ } });

• Syntaxe POST –

application/x-www-form-urlencoded; charset=UTF-8est un type de contenu par défaut, mais vous pouvez utiliser n'importe quel autre type, par exemple – application/json,  multipart/form-data, etc.

var xhttp = new XMLHttpRequest();
xhttp.open("POST", "ajaxfile.php", true); 
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
     // Response
     var response = this.responseText;
   }
};
var data = {name:'yogesh',salary: 35000,email: 'yogesh@makitweb.com'};
xhttp.send(JSON.stringify(data));

Syntaxe ci-dessus avec jQuery

$.ajax({
   url: 'ajaxfile.php',
   type: 'post',
   data: {name:'yogesh',salary: 35000,email: 'yogesh@makitweb.com'},
   success: function(response){

   }
});

---

Créer 2 fonctions –

• loadEmployees() - Cette fonction appelle la page chargée avec succès.

Créer un objet de XMLHttpRequest. Spécifiez la requête GET et le chemin du fichier AJAX avec le paramètre ( 'ajaxfile.php?request=1') dans la .open()méthode. Définissez Content-typeet gérez la réponse du serveur avec onreadystatechangela propriété.

Analysez l' this.responseTextobjet to JSON, sélectionnez <table id='empTable'> <tbody>-le et videz-le.

Boucle sur le responsepour lire les valeurs. Créez un nouvel élément de ligne de tableau et attribuez une valeur de réponse dans la cellule.

Envoyez la requête en appelant la send()méthode.

• insertNewEmployee () - Cette fonction appelle le clic sur le bouton Soumettre.

Lisez les valeurs des zones de texte et affectez-les dans des variables. Si les variables ne sont pas vides, créez un dataobjet JSON. Initialise datal'objet avec les valeurs de la zone de texte.

Créez XMLHttpRequestun objet et spécifiez la requête POST et le chemin du fichier AJAX ( 'ajaxfile.php') dans la .open()méthode. Définir Content-typeet 'application/json'gérer la réponse du serveur avec onreadystatechangela propriété.

Attribuer this.responseTexten response. Si response == 1alors alertez un message et appelez loadEmployees()la fonction pour récupérer les enregistrements.

Code terminé

loadEmployees();

// Load records with GET request
function loadEmployees() {
   var xhttp = new XMLHttpRequest();

   // Set GET method and ajax file path with parameter
   xhttp.open("GET", "ajaxfile.php?request=1", true);

   // Content-type
   xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

   // call on request changes state
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {

       // Parse this.responseText to JSON object
       var response = JSON.parse(this.responseText);

       // Select <table id='empTable'> <tbody>
       var empTable = 
document.getElementById("empTable").getElementsByTagName("tbody")[0];

       // Empty the table <tbody>
       empTable.innerHTML = "";

       // Loop on response object
       for (var key in response) {
          if (response.hasOwnProperty(key)) {
             var val = response[key];

             // insert new row
             var NewRow = empTable.insertRow(0); 
             var name_cell = NewRow.insertCell(0); 
             var username_cell = NewRow.insertCell(1); 
             var email_cell = NewRow.insertCell(2);

             name_cell.innerHTML = val['emp_name']; 
             username_cell.innerHTML = val['salary']; 
             email_cell.innerHTML = val['email']; 

          }
       } 

      }
   };

   // Send request
   xhttp.send();
}

// Insert new record with POST request
function insertNewEmployee() {

  var name = document.getElementById('txt_name').value;
  var salary = document.getElementById('txt_salary').value;
  var email = document.getElementById('txt_email').value;

  if(name != '' && salary !='' && email != ''){

     var data = {name: name,salary: salary,email: email};
     var xhttp = new XMLHttpRequest();
     // Set POST method and ajax file path
     xhttp.open("POST", "ajaxfile.php", true);

     // call on request changes state
     xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {

         var response = this.responseText;
         if(response == 1){
            alert("Insert successfully.");

            loadEmployees();
         }
       }
     };

     // Content-type
     xhttp.setRequestHeader("Content-Type", "application/json");

     // Send request with data
     xhttp.send(JSON.stringify(data));
  }

}

---

6. Sortie

Afficher la sortie

---

7. Conclusion

Avec l'utilisation de l'objet XMLHttpRequest, envoyez une requête AJAX.

Dans la requête GET, transmettez directement les données avec un nom de fichier comme - ajaxfile.php?name=yogesh&city=bhopalet dans la requête POST, transmettez vos données dans la send()méthode.

Source :  https://makitweb.com

#javascript #ajax #php 

Comment Télécharger Un Fichier En Utilisant JavaScript AJAX Et PHP

Le téléchargement de fichiers est une exigence de base dans un site Web. Cela se fait à l'aide d'un script côté serveur.

Nécessite de recharger la page après la soumission du formulaire pour exécuter le script.

Avec AJAX, le script côté client interagit avec le script côté serveur et exécute l'action sans recharger la page.

Dans ce tutoriel, je montre comment vous pouvez télécharger un fichier en utilisant JavaScript AJAX et PHP.

1.HTML

Créez un élément de fichier et de bouton. Ajout onclickd'un événement sur le bouton qui appelle uploadFile()la fonction.

Code terminé

<div >
  <input type="file" name="file" id="file">
  <input type="button" id="btn_uploadfile" 
     value="Upload" 
     onclick="uploadFile();" >
</div>

---

2.PHP

Créez un ajaxfile.phpfichier et un uploaddossier pour stocker les fichiers.

Vérifiez si $_FILESArray est défini ou non. S'il est défini, attribuez - $_FILES['file']['name']le à $filename, nom du fichier avec l'emplacement de téléchargement dans $locationla variable.

Obtenez l'extension de fichier et attribuez des extensions de fichier valides dans $valid_extArray.

Vérifiez si l'extension de fichier existe dans $valid_extArray. S'il existe, téléchargez le fichier et attribuez 1 à $responses'il est téléchargé avec succès.

Retour $response.

Code terminé

<?php

if(isset($_FILES['file']['name'])){
   // file name
   $filename = $_FILES['file']['name'];

   // Location
   $location = 'upload/'.$filename;

   // file extension
   $file_extension = pathinfo($location, PATHINFO_EXTENSION);
   $file_extension = strtolower($file_extension);

   // Valid extensions
   $valid_ext = array("pdf","doc","docx","jpg","png","jpeg");

   $response = 0;
   if(in_array($file_extension,$valid_ext)){
      // Upload file
      if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
         $response = 1;
      } 
   }

   echo $response;
   exit;
}

---

3. JavaScript

Créer uploadFile()une fonction qui appelle le clic sur le bouton Télécharger.

Lecture filesd'un fileélément. Si un fichier est sélectionné alors créez un objet sinon, message FormDatad'alerte ."Please select a file"

Ajouter files[0]pour 'file'saisir formData.

Pour envoyer une requête AJAX, créez un objet de XMLHttpRequest. Avec open()la méthode, définissez la méthode de demande sur "POST"et le chemin du fichier AJAX.

Gérer le rappel réussi d'AJAX avec la onreadystatechange()méthode. Affecter this.responseTextdans responsela variable. Si response == 1alors message d'alerte "Upload successfully."sinon, "File not uploaded."message d'alerte.

Passer l' formDataobjet avec la send()méthode.

Code terminé

// Upload file
function uploadFile() {

   var files = document.getElementById("file").files;

   if(files.length > 0 ){

      var formData = new FormData();
      formData.append("file", files[0]);

      var xhttp = new XMLHttpRequest();

      // Set POST method and ajax file path
      xhttp.open("POST", "ajaxfile.php", true);

      // call on request changes state
      xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {

           var response = this.responseText;
           if(response == 1){
              alert("Upload successfully.");
           }else{
              alert("File not uploaded.");
           }
         }
      };

      // Send request with data
      xhttp.send(formData);

   }else{
      alert("Please select a file");
   }

}

---

4. Sortie

Afficher la sortie

---

5. Conclusion

Envoyez l'instance de fichier à l'aide de l'objet FormData et dans le fichier AJAX, accédez-y à l'aide du tableau $_FILES.

Source :  https://makitweb.com

#php #javascript #ajax