Petite question: Une box animée?

Ce serait possible en faisant un code qui ressemblerait à ceci :

<!--
Tu peux bien évidemment adapter ce code a ta console :)

.console : Ta console
.msg-user : Message de l'utilisateur
.msg-core : Message généré dynamiquement
.msg-params : Paramètres envoyés à ton traitement php
-->
<style>
/*  CSS de base */
.msg-user:before {
  content: ">>> ";
}
.msg-user input {
  border: none;
}
.hide {
  display: none;
}
</style>
<div class="console">
  <div class="msg-params hide"></div>
  <div class="msg-core">Message de base</div>
  <div class="msg-user"><input type="text"></div>
</div>

Après quand l'utilisateur fait 'enter' envoyer une requête post à console.php par exemple avec les paramètres,ce que l'utilisateur à écrit qui effectuerait un traitement en fonction des paramètres et de ce que l'utilisateur a saisi et retournerai un json avec les paramètres et le retour que tu peux ensuite afficher (En js)

Après tu peux améliorer mais voilà la base :)

Une requête en POST ? Mais je ne veux pas un formulaire....

Et comment faire avec le JS s'il te plaît, car je ne m'y connais pas vraiment...

Ce code dépend de jQuery :

jQuery(document).ready (function($) {
var $console = $('.console');
$('input', $console).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
var $params = $('.msg-params', $console);
var $msg = $('.msg-user');
var $input = $('input', $msg);

var params = $params.text();
var command = $input.val();

$msg.remove();
$console.append('<div class="msg-core">'+command+'</div>');

$.post('console.php', {
params:params,
command:command
}).done(function(data){
$console.append('<div class="msg-core">'+data.return+'</div>');
$params.text(data.params);
$console.append('<div class="msg-user"><input type="text"></div>');
}).fail(function(){
alert ('Erreur.');
}
}
});
});

Côté php ça doit retourner un json contenant :

{
"returns":"Retour dans la console",
"params":"Paramètres pour traiter la prochaine commande"
}

Je suis pas sur de mon code, il est probablement buggé il te faudra le modifier ;)

J'ai tout d'abord essayé de comprendre ton code, se que je n'ai pas vraiment réussis, et de plus après je l'ai essayer pour voir dans la volé, mais ça ne marche pas...
PS: J'ai bien évidemment link JQuery

Une requête en POST ? Mais je ne veux pas un formulaire....

genre au début ça demande quelque chose l'utilisateur répond

Comment veux-tu interagir avec l'utilisateur alors ?
Pour que l'utilisateur saisisse des données et qu'elles soient soumises à ton application, à part via un formulaire, je ne vois pas comment tu pourrais faire.

Si tu ne veux pas que ça ressemble à un formulaire et donc à des inputs, il te suffit tout simplement de passer par le CSS.

Oui, j'avais oublié de modifier le post, après lecture du code Jquery, j'ai compris que le formulaire se fait par Jquery, et donc ne recharge pas la page, comme le ferait un bon vieux HTML.
Edit: Après rreevue du code, le code ne veut pas marcher, voici le code: http://hastebin.com/eyoxihorey.xml

Essaye de remplacer la ligne jQuery ready machin par $(function() {

Je suis actuellement sur l'API de Jquery ( http://api.jquery.com/ready/ ), mais je ne vois pas d'où ça viendrait...

En fait j'pense qu'il faut charger jQuery avant le script

C'est fait si tu as vue le hastebin.

Ah ouais j'avais pas fait gaffe... t'as des erreurs dans ta console développer ?

Aucunes, elle est vierge.

Essaye de faire un coup de debugger au tout début de ton script et vois ce que ça donne

Ah, c'est bon j'ai trouvé l'érreur, une ")" qui n'était pas mise :D
Mais maintenant, je me pose la question suivante:
A quoi servent ces lignes ? :

            $.post('console.php', {
                params:params,
                command:command
            }).done(function(data){
                $console.append('<div class="msg-core">'+data.return+'</div>');
                $params.text(data.params);
                $console.append('<div class="msg-user"><input type="text"></div>');
            }).fail(function(){
                alert ('Erreur.');
            });

Car ça retourne "Erreur' (Alerte)
EDIT:
J'ai créé le fichier console.php, mais maintenant je comprends pas pour les conditions, et retourner "data"

Ces lignes envoyent une requête POST à console.php qui va s'occuper du traitement En fonction de params $_POST ['params'] et de command $_POST ['command'] et faire un retour json comme j'ai montré.

le .done va afficher le retour et proposer de faire une nouvelle requête si la requête POST s'est bien passée.

Le .fail affiche une alert Erreur si la requête à échoué.

Et data contient le retour de console.php

Voici un code PHP de test:

if(isset($_POST['params']) || isset($_POST['command'])) {
    return 'lol';
}

Mais ça me retourne "Undefined", et aussi, donc "commands" = le premier mot ? Et params les arguments? Genre tous d'un coup ? Ou sous un tableau?

params = paramètres de traitement
command = la commande

Code de test :

$r = array(
'return' => 'Vous avez tapé '. $_POST['command'],
'params' => ' Params de traitement'
);

return json_encode($r);

Heu.... Le retour reste le même... "undefined"

fais un console.log (data) pour tester et dis ce que ça te retourne

C'est pareil, undefined.

Ah mais non faut pas mettre return mais echo en fait

C'est pareil, undefined.

Dans l'onglet Network ton post il y a quoi comme retour ?

Data est vide.

J'ai fait des petites modifications de code : JSFiddle du code en statique

JSFiddle du code complet

Je vois, mais dans Console.php, donc je met quoi pour faire le retour?

// Traitement machin chose...

// Sortie JSON (Array php)
$r['return'] = 'Commande tapée : '. $_POST['command'];
$r['params'] = 'blabla de params pour des actions poussées';

// Retour (JSON) de l'array $r
echo json_encode($r);

Normalement avec ça ça devrait marcher :)

ça marche toujours pas....

ça marche, super merci!

Nouvelle question:
Lorsque le texte est tapé (Commande tapée...), je peux mettre du text, mais si je fais entrer ça fait plus rien?
PS: Désolé de poser autant de question mais je suis pas très doué en JS....