¡Ajax simple con el juego!

Question

¡He estado examinando muchos tutoriales jQuery Ajax e intentando incorporarlo con mi juego! Aplicación, pero no entiendo del todo algunas cosas. ¿Es posible que alguien pueda explicar cómo hacer lo siguiente a través de las llamadas de Ajax:

1) Suponga que quiero recuperar una lista de contactos de un controlador (cada contacto tiene nombre, teléfono, correo electrónico). ¿El controlador necesita "construir" la respuesta adecuada para la plantilla? ¿Cómo se ve el controlador? ¿Cómo es el JavaScript para recuperarlo?

2) Para agregar/actualizar un nuevo contacto a través de una llamada AJAX, ¿cómo es el JavaScript?

Aquí hay código para un ejemplo de la explicación anterior (no usando AJAX):

---

Controlador:

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

Plantilla (enumera todos los contactos):

#{list contacts, as:'contact'}

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

#{/list}

Plantilla (agregar contacto):

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

No estoy familiarizado con el lado de juego de las cosas, pero si desea recuperar algunos datos de JSON a través de una llamada de Ajax, el controlador podría verse algo así como:

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

La jQuery para recuperar los datos JSON se vería algo así como:

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

Para agregar/actualizar un contacto, puede hacer algo como:

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

Obviamente, querrías agregar mucho manejo de errores. los $.getJSON y $.post Las funciones son atajos para los más flexibles $ .AJAX. Busque eso para obtener más opciones.

Answer 2

Aquí hay el simple ejemplo de usar Ajax con Json en juego usando Scala

Aquí el código de JSON usando 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

Descargue el juego y mire su ejemplo de reserva que parece hacer casi exactamente lo que está buscando y es un gran ejemplo de su uso de JSACTION ... (además, puede ejecutarlo usted mismo).

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

Básicamente, me parece que tienen un archivo HTML y simplemente insertan el HTML devuelto en el DIV de la página que en la página de HTML de destino que Div está vacía y lo completan con otro archivo HTML de Play. (Todo está en el ejemplo de reserva).