Einfaches Ajax mit Spiel!

Question

Ich habe viele JQuery Ajax -Tutorials durchgesehen und versucht, es mit meinem Spiel zu integrieren! App, aber ich verstehe nicht ganz ein paar Dinge. Ist es möglich, dass jemand erklären könnte, wie man durch Ajax -Anrufe Folgendes macht:

1) Angenommen, ich möchte eine Liste von Kontakten von einem Controller abrufen (jeder Kontakt enthält Name, Telefon, E -Mail). Muss der Controller die richtige Antwort für die Vorlage "erstellen"? Wie sieht der Controller aus? Wie sieht das JavaScript aus, um es abzurufen?

2) Wie sieht das JavaScript zum Hinzufügen/Aktualisieren eines neuen Kontakts über einen Ajax -Anruf aus?

Hier ist Code für ein Beispiel für die obige Erklärung (nicht mit AJAX):

---

Regler:

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();
}

Vorlage (listet alle Kontakte auf):

#{list contacts, as:'contact'}

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

#{/list}

Vorlage (Kontakt hinzufügen):

#{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

Ich bin mit der Spielseite der Dinge nicht vertraut, aber wenn Sie einige JSON -Daten über einen Ajax -Anruf abrufen möchten, könnte der Controller so aussehen wie:

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

Die JQuery, um die JSON -Daten abzurufen, würde ungefähr aussehen wie:

// 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...
    });
});

Um einen Kontakt hinzuzufügen/zu aktualisieren, tun Sie möglicherweise etwas wie:

// 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!");
    });
});

Sie möchten offensichtlich viel Fehlerbehandlung hinzufügen. Das $.getJSON und $.post Funktionen sind Abkürzungen für die flexibler $ .ajax. Schauen Sie sich das nach weiteren Optionen an.

Answer 2

Hier ist das einfache Beispiel für die Verwendung von Ajax mit JSON im Spiel mit Scala

Hier der Code von JSON mit 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

Laden Sie das Spielen und schauen Sie sich ihr Buchungsbeispiel an, das so ziemlich genau das bewirkt, was Sie suchen, und ist ein großartiges Beispiel für die Verwendung von JSAction .... (außerdem können Sie es selbst ausführen).

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

Im Grunde genommen schaut mich für mich so aus, als hätten sie eine HTML -Datei und fügen einfach die zurückgegebene HTML in die DIV der Seite ein, die auf der Ziel -HTML -Seite, dass Div leer ist, leer ist und sie mit einer anderen HTML -Datei vom Spielen ausfüllen. (Es ist alles im Buchungsbeispiel).