Insérer des données dans MySQL avec AJAX

Version imprimable

Bonjour,

Je souhaite insérer des données via AJAX dans une base de données MySQL.

Code javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function saveMapping(){
    var session = "<?php echo $_SESSION['user_id']; ?>";
    var input = document.getElementById('fileUpload'); // get the input
    var fichier = input.files[0];
 
    const listItems = document.querySelectorAll(".zone-groupe ul");
    var i = 0;
    for (i = 0; i < listItems.length; i++) {
        var ulID = oElems[i].id;
        var value = listItems[i].textContent;
        //alert(session+fichier+ulID+value);
        insertMapping(session, fichier, ulID, value);
    }
}
 
 
function insertMapping(session, fichier, ulID, value){
    	$.ajax({
        url: "./php/insert_mapping.php",
        type: "POST",
        data: {
            USER: session,
            FICHIER: fichier,
            UL_ELEMENT: ulID,
            UL_VALUE: value
        },
        processData: false,
        contentType: false,
    	});
}

Code PHP:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
include("../authent/config.php");
 
 
$user = $_POST['USER'];
$fichier = $_POST['FICHIER'];
$ul_element = $_POST['UL_ELEMENT'];
$ul_value = $_POST['UL_VALUE'];
 
 
$sql = "INSERT INTO MAPPING (USER, FICHIER, UL_ELEMENT, UL_VALUE) VALUES ('$user', '$fichier', '$ul_element', '$ul_value')";
$stmt = $pdo->prepare($sql);
$result = $stmt->execute();
echo json_encode(array("statusCode"=>200));
?>

Si je n'ai qu'une ligne à insérer et que les insert ne sont pas faits dans la boucle FOR, alors l'insertion fonctionne correctement.

Depuis que j'ai mis cette insertion dans une boucle FOR, des lignes vides sont insérées (toutes les colonnes sont vides).

De plus, j'ai les erreurs ci-dessous dans la console java
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

J'ai également essayé avec ces méthodes mais ça ne veut pas fonctionner :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: function(data) {
            return data;
        },
        complete: function(){
              // do the job here
         }
    });
}
 
var response = functABC();

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        async: false,
        success: function(data) {
            return data;
        }        
    });
 
   // do the job here
}

Est-ce que quelqu'un pourrait m'aider à sortir de ces problèmes ?

Merci beaucoup

Le sujet est en délestage parce que j'ai trouvé une solution de contournement.

Au lieu d'appeler n fois la fonction AJAX, j'envoie une seule fois une matrice qui contient toutes les données. Ainsi, la boucle for se trouve maintenant dans le script PHP et je n'ai plus ces problèmes de synchronisation.

Voici le code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
function saveMapping(){
    var session = "<?php echo $_SESSION['user_id']; ?>";
    var input = document.getElementById('fileUpload'); // get the input
    var fichier = input.files[0].name;
 
    const listItems = document.querySelectorAll(".zone-groupe ul");
 
    var oElems = document.querySelectorAll(".zone-groupe ul");
    var i;
 
    var oElem;
    var j;
    var tab;
 
    var matrice= new Array();
    matrice.length=parseInt(oElems.length);
 
    var line;
 
 
    for (i = 0; oElems[i]; i += 1) {
        line = new Array();
        line.length=parseInt(2);
        oElem = oElems[i].children;
        var elem_id = oElems[i].id;
        var elem_value;
        for (j = 0; oElem[j]; j += 1) {
        elem_value = oElem[j].dataset.num;
        }
        if(j==0) {
            elem_value = "";
        }
        line[0] = elem_id;
        line[1] = elem_value;
        matrice[i] = line;
    }
 
    $.ajax({
        url: "./php/insert_mapping.php",
        type: "POST",
        data: {
            MATRICE: matrice,
            USER: session,
            FICHIER: fichier
        },
        success:function(data)
        {
            alert('res : '+data);
        } 
    });
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<?php
    include("../authent/config.php");
 
    $matrice = array($_POST['MATRICE']);
    $user = $_POST['USER'];
    $fichier = $_POST['FICHIER'];
 
    $line = $matrice[0];
    $sql = '';
    $ul_element = $line[0][0];
    $ul_value = $line[0][1];
 
 
    for($i = 0 ; $i < count($line) ; $i++) {
        $ul_element = $line[$i][0];
        $ul_value = $line[$i][1];
        $sql = "INSERT INTO MAPPING (USER, FICHIER, UL_ELEMENT, UL_VALUE) VALUES ('$user', '$fichier', '$ul_element', '$ul_value')";
        $stmt = $pdo->prepare($sql);
        $result = $stmt->execute();
    }
 
    echo json_encode(array("statusCode"=>200));
?>

10/02/2025, 07h42
mathieu

pour vos requêtes sql, je vous conseille d'utiliser des requêtes préparées pour éviter les possibilités d'injection sql :
https://www.php.net/manual/fr/pdo.pr...statements.php
15/02/2025, 18h24
ABCIWEB

Le conseil de Mathieu est important pour la sécurité. De même je te conseille d'éviter d'utiliser des variables php pour renseigner directement des variables javascript car cela ne te permettras pas d'externaliser le code javascript, ce qui est parfois nécessaire pour renforcer la sécurité, ou ne serait-ce que pour avoir un code plus lisible/mieux structuré.

Typiquement la solution consiste à faire afficher la valeur php dans un div ou un input caché dans le html <input id="user_id" type="hidden" value="<?= $_SESSION['user_id']?>"> puis de la récupérer avec javascript.