HTML

Version imprimable

10/01/2020, 11h08
grosfaignan

Transmission de variable entre JS/PHP/HTML

bonjour

je debute en java, je cherche une fonction qui me permette d'afficher un script php en lui passant un parametre,

j'ai regarder du coté du tuto mais j'ai du mal a m'y retrouver qqun pourrait m'aider ?

pour plus de detail voici ce que je cherche a faire :

1) j'ai une page home.html qui contient un <input >

2)l' utilisateur entre une valeur qui doit être traitée par un script php et dont le résultat doit être afficher sur la meme page

donc je cherche a savoir comment transmettre les valeur de l'input au script php et faire en sorte que les champs correspondant s'affiche dans la page web. l'ideal étant que les champs soit mis a jour sur la page originale au moment du "submit" / "enter".

et ce qui me semblerait le plus pratique serait d'avoir

1) une page html pour l'interface utilisateur

2) mon script php qui effectue les commande

3) un fichier JS/AJAX qui met a jour ma page web a chaque mise a jour d'une variable

et en gros je cherche a avoir une structure un peut comme ca :

ont récupère la saisie utilisateur via une commande JS (oui mais laquelle ?) et ont la transmet au fichier php... via la une autre fonction pareil laquelle ?

ensuite via une commande AJAX genre XMLHttpRequest ont actualise le contenue de la page (éventuellement dans un iframe ... mais pas nécessairement).

mais le plus important je cherche aussi a savoir par quel bout commencer.
10/01/2020, 11h49
Invité

Bonjour,

1- déjà, évite de confondre "Java" et "JavaScript".

2- Regarde dans les cours/FAQ JavaScript/Ajax.

oups pardon ma première réponse n'est visiblement pas passée, j'ai finis par trouver une solution avec un iframe, c'est pas terrible je sais mais n’hésitez pas a me dire comment améliorer mon 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
<!doctype html>
<html lang="fr">
 
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="style.css">
 
</head>
 
<body>
    <div class="body">
        <div class="headers">
            <div class="banner">
 
            </div>
            <div class="input-form">
                <div classe="input-container">
                    <div class="input-element">
                        <input type="text" class="data" name="cmd" id="cmd" placeholder="Entrez votre commande ">
                        <!-- <input type="submit" id="ok" value="OK" onClick='getSrc();'> -->
                    </div>
                    <div class="input-element">
                        <input type="text" class="data" name="regex" id="regex" placeholder="Entrez votre regex ">
                        <!-- <input type="submit" id="ok" value="OK" onClick='getSrc();'> -->
                    </div>
 
                </div>
                <!-- <div class="input-container"> -->
                    <div class="button" id="button">
                        <button type="submit" class="button" id="ok" type="button" onclick='getSrc();'><img
                                src="enter-10.png"></img></button>
                    </div>
                <!-- </div> -->
            </div>
        </div>
        <div class="output">
            <iframe id="shellFrame" width="1024" height="800" src="shell.php?cmd="></iframe>
        </div>
    </div>
</body>
<script src="script2.js"></script>
 
</html>

sur ma page html mon code contient 2 input charger de recevoir les commande, et un bouton permettant poster la requête en mode "get"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Get the input field
var input = document.getElementById("cmd");
 
// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    // Trigger the button element with a click
    document.getElementById("ok").click();
  }
});
 
function getSrc()
{
    document.getElementById('shellFrame').src ="shell.php?cmd=" + document.getElementById('cmd').value + "&regex="+ document.getElementById('regex').value;;
 
}

sur ma page script2.js
la fonction input.addEventListener me permet de capturer la touche entrée comme un click sur submit

la fonction getSrc me permet de capturer les commande passée et de retourner le contenu de ma page php dans l'iframe.

voila un peut le tableau, c'est pas terrible mais si vous pouvez me dire comment améliorer ca je suis preneur

ps : je ne confond pas java et js ...^^ juste une faute de frappe

14/01/2020, 13h36
Invité
Bonjour,
- Web 2.0, allez plus loin avec AJAX et XMLHttpRequest
Fais les exercices proposés, pour bien comprendre le principe.