Playでシンプルなアヤックス！

Question

私は多くのjQuery ajaxチュートリアルを試してみて、それを自分のPlayに組み込もうとしています！私はいくつかのことをよく理解していません。

1）コントローラから連絡先のリストを取得したいとします（各連絡先には名前、電話番号、メールアドレスがあります）。コントローラーはテンプレートの適切な応答を "構築"する必要がありますか？コントローラーの外観はどうですか？それを取得するためにjavascriptの外観は何ですか？

2）新しい連絡先をajax呼び出しで追加/更新するには、javascriptの外観はどうですか？ここ

は（AJAXを使用していない）上記の説明の例のコードである：

---

コントローラー：

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

テンプレート（リストのすべての連絡先） ：

 
#{list contacts, as:'contact'} 

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

#{/list} 

テンプレート（連絡先を追加）：

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

私は物事のプレイ側に慣れていないんだけど、あなたは、いくつかのJSONを取得したい場合データはAjaxコールを介してコントローラは次のようになります：

あなたは明らかに追加したいと思います

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

：ようにあなたが何かをするかもしれない連絡先を更新/追加するには

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

：JSONデータは次のようになります取得するため

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

のjQuery多くのエラー処理で。 $.getJSONと$.postの機能は、より柔軟な$.ajaxのショートカットです。それ以上のオプションを見てください。

Answer 2

ダウンロードして、あなたの探しているものとほぼ同じように見える予約の例を見てください.jsactionの使い方の素晴らしい例です。（プラス自分でも実行できます）

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

彼らはhtmlファイルを持っているし、彼らは単にターゲットhtmlページ上のdivが空であることを、彼らはお互いにそれを埋めるページのdiv要素の中にHTML返さを挿入するように基本的には、私には見えますhtmlファイルを再生します。 （予約の例ではすべてです）。

Answer 3

は、 "それは何のようになります？" ここでScalaの

を使って遊びにJSONと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>