Ajax simple avec jeu!

Question

J'ai passé au crible de nombreux tutoriels JQuery Ajax et j'ai essayé de l'incorporer avec mon jeu! application mais je ne comprends pas tout à fait certaines choses. Est-il possible que quelqu'un puisse expliquer comment effectuer ce qui suit via les appels Ajax:

1) Supposons que je souhaite récupérer une liste de contacts à partir d'un contrôleur (chaque contact a le nom, le téléphone, l'e-mail). Le contrôleur doit-il "construire" la réponse appropriée du modèle? À quoi ressemble le contrôleur? À quoi ressemble le JavaScript pour le récupérer?

2) Pour ajouter / mettre à jour un nouveau contact via un appel AJAX, à quoi ressemble le JavaScript?

Voici le code pour un exemple de l'explication ci-dessus (n'utilisant pas ajax):

---

Manette:

public static void list() {
    List contacts= Contact.fetchAll();
    render(contacts);
}

public static void add(String name, String phone, String email) {
    Contact contact = new Contact();
    contact.name = name;
    contact.phone = phone;
    contact.email = email;
    contact.save();
}

public static void update(Long id, String name, String phone, String email) {
    Contact contact = Contact.findById(id);
    contact.name = name;
    contact.phone = phone;
    contact.email = email;
    contact.save();
}

Modèle (répertorie tous les contacts):

#{list contacts, as:'contact'}

    ${contact.name}
    ${contact.phone}
    ${contact.email}

#{/list}

Modèle (Ajouter un contact):

#{form @Contacts.add(), id:'form'}

<input type="text" name="name" />
<input type="text" name="phone" />
<input type="text" name="email" />
<input type="submit" value="Add" />

#{/form}

Answer 1

Je ne connais pas le côté de jeu des choses, mais si vous vouliez récupérer certaines données JSON via un appel Ajax, le contrôleur pourrait ressembler à quelque chose:

public static void getContacts() {
    List<Contact> contacts = // get contacts here...
    renderJSON(contacts);
}

La jQuery pour récupérer les données JSON ressemblerait à quelque chose comme:

// the getJSON function automatically parses the returned JSON
// data into a JS data structure
$("#retrieve_contacts").click(function(event) {
    $.getJSON("/url/which/calls/controller/", function(contacts) {
        // do something with contacts list here...
    });
});

Pour ajouter / mettre à jour un contact, vous pouvez faire quelque chose comme:

// call the controller to add the relevant contact with
// the info in the second param:
$("#add").click(function(event) {
    var newcontact = {
        name: $("input[name='name'").val(),
        phone: $("input[name='phone'").val(),
        email: $("input[name='email'").val(),
    };

    $.post("/url/which/adds/new/contact/", newcontact, function(data) {
        alert("Contact added!");
    });
});

Vous voudrez évidemment ajouter beaucoup de gestion des erreurs. La $.getJSON et $.post Les fonctions sont des raccourcis pour les plus flexibles $ .ajax. Recherchez cela pour plus d'options.

Answer 2

Voici l'exemple simple de l'utilisation de l'Ajax avec JSON en jeu en utilisant Scala

Ici, le code de JSON à l'aide d'Ajax

@(list: List[User])(implicit session:play.api.mvc.Session)


@main(""){

     @if(list.size>0){
        @for(i<-list){
            <h1> welcome on ur Profile page </h1>
    your id is             @i.id <br>
    your first name is     @i.fnm <br>
    Your Last Name Is      @i.lnm <br>      
    Your password is       @i.pwd <br>
    And your address is    @i.res <br>
    and ur contact no. is  @i.num <br>      
        }       
    }else{
    Sorry, Please insert data in list before watching this page
    }
    }
<h4> want to know the details of other user click here  </h4><br>
<input type="button" value="FriendRequestList" onclick="friendList()">
<br/>
<br/>
<script>

function friendList() {
    $.ajax({
        type : "POST",
        url : "/userDetail",
        //data : "sender_id=" + id,
        success : function(data) {
            var d=JSON.parse(data);
            var inn="";
            for(var i in d){
            inn+="<label>"+d[i]["fnm"]+"</label>";
            inn+="<input type='button' value='SendRequest' onClick ='sendRequest(\""+d[i]["id"]+"\")'>";
            inn+="<br/>";
            }
            document.getElementById("output").innerHTML = inn;
        }
    });
}

function sendRequest(id) {
    $.ajax({
        type : "POST",
        url : "/sendRequest",
        data:{"receiver_id":id},
        success:function(){
            alert("hi");}
    });

} 
</script> 

<input type="button" value="YourRequest" onclick="RequestList()">
<br/>
<br/>
<script>
function RequestList() {
    $.ajax({
        type : "POST",
        url : "/requestList",
        //data : "sender_id=" + id,
        success : function(data) {
            var d=JSON.parse(data);
            alert(d[0])
            var inn="";
            for(var i in d){

            inn+="<label>"+d[i]+"</label>";
            inn+="<input type='button' value='AcceptRequest' onClick ='AcceptRequest(\""+d[i]["id"]+"\")'>";
            inn+="<br/>";
            }
            document.getElementById("output").innerHTML = inn;
        }
    });
}
function AcceptRequest(id) {
    $.ajax({
        type : "POST",
        url : "/acceptRequest",
        data:{"friend_id":id},
        success:function(){
            alert("request accept succcessfully ");}
    });
}
    </script>
<div id="output"></div>

For Logout Click Here <a href="/logout" >Logout</a> 

Answer 3

Téléchargez Play et regardez leur exemple de réservation qui semble faire à peu près exactement ce que vous recherchez et est un excellent exemple de leur utilisation de JSAction .... (De plus vous pouvez l'exécuter vous-même).

http://www.playframework.org/documentation/1.2.3/tags#jsaction

Fondamentalement, me semble avoir un fichier HTML et ils insérent simplement le HTML retourné dans la div de la page qui, sur la page HTML cible, div est vide et ils le remplissent avec un autre fichier HTML de Play. (Tout est dans l'exemple de réservation).