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.