¡Ajax simple con Play!

Question

He estado revisando muchos tutoriales de jQuery ajax e intentando incorporarlo con mi Play! aplicación, pero no estoy entendiendo algunas cosas. Es posible que alguien pueda explicar cómo hacer lo siguiente a través de llamadas Ajax:

1) Supongamos 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? ¿Qué aspecto tiene el javascript para recuperarlo?

2) Para agregar/actualizar un nuevo contacto a través de una llamada ajax, ¿cómo se ve el javascript?

Aquí es el 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 (listas de todos los contactos) :

 
#{list contacts, as:'contact'} 

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

#{/list} 

Plantilla (Añadir 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 reproducción de las cosas, pero si quisiera recuperar algunos JSON datos a través de una llamada Ajax, el controlador podría tener el siguiente aspecto:

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

El jQuery para recuperar los datos JSON se vería algo 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 añadir/actualizar un contacto que podría 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!"); 
    }); 
}); 

Se podría, obviamente, desea agregar en un montón de manejo de errores. Las funciones $.getJSON y $.post son atajos para el $.ajax más flexible. Mire eso para más opciones.

Answer 2

Descarga play y mira su ejemplo de reserva que parece hacer más o menos exactamente lo que estás buscando y es un gran ejemplo de su uso de jsaction .... (además puedes ejecutarlo tú mismo).

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

Básicamente, me parece que tienen un archivo html y que acaba de insertar el devueltos HTML en el div de la página que en la página HTML de destino que div está vacío y lo llenan con otro archivo html desde el juego. (todo está en el ejemplo de reserva).

Answer 3

hereis el ejemplo sencillo de utilizar 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>