Comment puis-je utiliser AJAX et PHP pour soumettre efficacement plusieurs entrées de formulaire à une base de données sans actualisation de page ?

AJAX et PHP pour saisir plusieurs entrées de formulaire dans une base de données

Dans cet article, nous explorerons comment utiliser AJAX et PHP pour saisir plusieurs entrées de formulaire dans une base de données. Comme vous êtes nouveau sur AJAX, nous nous concentrerons sur la compréhension des concepts et de l'application d'AJAX dans ce contexte.

Pour commencer, considérons l'exemple de formulaire suivant généré en PHP :

<?php

   echo "<form method='post'>";

   $i=1;

    while($i <= $num_to_enter){

    $form_output .= "First Name:

    <input>

Ce formulaire génère dynamiquement plusieurs ensembles de champs de saisie en fonction de la sélection de l'utilisateur (« $num_to_enter »). Notre objectif est d'utiliser AJAX pour envoyer les données de ces champs de saisie à un script PHP pour l'insertion dans la base de données.

Concernant la fonction AJAX que vous avez fournie, le problème principal est l'utilisation incorrecte du caractère '&' lorsque concaténer les chaînes de données. De plus, la boucle « while » en dehors de l'appel AJAX entraîne l'envoi de données vides.

Voici une version corrigée de la fonction AJAX :

function MyFunction(){

  var i = 1;
  var x = $('#num_to_enter').val(); // Get the number of form sets

  var dataString = ''; // Initialize an empty data string

  // Iterate through the number of form sets
  while (i <= x){

    // Concatenate the data string using JavaScript's += operator
    dataString += "fname[" + i + "]=" + $('#fname[' + i + ']').val() + "&";
    dataString += "lname[" + i + "]=" + $('#lname[' + i + ']').val() + "&";
    dataString += "email[" + i + "]=" + $('#email[' + i + ']').val() + "&";

    i++;
  }

  // Remove the trailing '&' character from the data string
  dataString = dataString.substr(0, dataString.length - 1);

  // Send the data via AJAX to the 'process.php' script
  $.ajax({
    url: 'process.php', 
    type: 'POST', 
    data: dataString, // The concatenated data string is passed here
    success: function(data){

      // Handle the response from 'process.php'
      // Your code goes here
    },
    complete: function(){
      // Perform tasks after the AJAX request is complete
      // Your code goes here
    }
  });
}

Dans cette fonction corrigée, nous concaténons de manière appropriée les données dans une seule chaîne ("dataString") et transmettez-la comme paramètre "data" dans l'AJAX appel.

Pour le script PHP ("process.php"), nous pouvons avoir quelque chose comme ceci :

<?php
  if($_SERVER['REQUEST_METHOD'] === 'POST') {

    // Parse the data from the POST request
    parse_str($_POST['data'], $formData);

    // Extract the individual data sets
    $fnames = $formData['fname'];
    $lnames = $formData['lname'];
    $emails = $formData['email'];

    // Initialize the success flag
    $success = true;

    // Perform the database insertions
    for ($i = 0; $i < count($fnames); $i++) {

      // Insert into database
      // ...

      // Check if any insertion failed
      if(!...){
        $success = false;
        break;
      }
    }

    // Return the success flag as JSON
    echo json_encode(array('success' => $success));
  }
?>

Dans ce script PHP, nous analysons les données POST, extrayons l'individu ensembles de données et parcourez-les pour effectuer des insertions dans la base de données. Si une insertion échoue, l'indicateur « succès » est défini sur false. Enfin, nous renvoyons l'indicateur « succès » au format JSON à l'appel AJAX.

Cette approche vous permet de soumettre plusieurs ensembles de formulaires de manière asynchrone via AJAX et de gérer les insertions de base de données dans le script PHP, offrant ainsi une expérience utilisateur plus fluide sans rafraîchir la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!