प्ले के साथ सरल AJAX!

Question

मैं कई jQuery AJAX ट्यूटोरियल के माध्यम से जा रहा हूं और इसे अपने Play के साथ शामिल करने का प्रयास कर रहा हूं! ऐप लेकिन मैं कुछ चीजों को समझ नहीं रहा हूं। क्या यह संभव है कि कोई अजाक्स कॉल के माध्यम से निम्नलिखित को कैसे समझा सकता है:

1) मान लीजिए कि मैं नियंत्रक से संपर्कों की एक सूची पुनर्प्राप्त करना चाहता हूं (प्रत्येक संपर्क का नाम, फोन, ईमेल) है। क्या नियंत्रक को टेम्पलेट के लिए उचित प्रतिक्रिया "निर्माण" करने की आवश्यकता है? नियंत्रक कैसा दिखता है? जावास्क्रिप्ट इसे पुनः प्राप्त करने जैसा दिखता है?

2) AJAX कॉल के माध्यम से एक नया संपर्क जोड़ने/अपडेट करने के लिए, जावास्क्रिप्ट कैसा दिखता है?

यहाँ से ऊपर (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 पुनः प्राप्त करना चाहते थे अजाक्स कॉल के माध्यम से डेटा नियंत्रक कुछ ऐसा दिख सकता है:

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

jQuery पुनः प्राप्त करने के JSON डेटा कुछ ऐसा दिखाई देगा:

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

जोड़ें/कोई संपर्क आपके पास की तरह कुछ कर सकता अद्यतन करने के लिए:

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

आप स्पष्ट रूप से जोड़ सकते हैं, बहुत से त्रुटि प्रबंधन में। $.getJSON और $.post फ़ंक्शन अधिक लचीला $.ajax के लिए शॉर्टकट हैं। अधिक विकल्पों के लिए देखो।

Answer 2

नाटक डाउनलोड करें और उनके बुकिंग उदाहरण को देखें जो कि आप जो कुछ भी ढूंढ रहे हैं वह काफी सुंदर लगता है और यह jsaction के उपयोग का एक बड़ा उदाहरण है .... (साथ ही आप इसे स्वयं चला सकते हैं)।

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

मूल रूप से, मेरे लिए लगता है कि वे एक HTML फ़ाइल है और वे सिर्फ डालने पेज के div में एचटीएमएल लौटे जो लक्ष्य html पृष्ठ है कि div खाली है पर और वे इसे भरने में दूसरे के साथ खेल से एचटीएमएल फ़ाइल। (यह सब बुकिंग उदाहरण में है)।

Answer 3

स्केला

यहाँ json के कोड का उपयोग कर खेलने में json साथ ajax का उपयोग कर ajax

का उपयोग करने का सरल उदाहरण hereis

@(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>