title: Simple ajax with Play!
body: <p>I've been sifting through many jQuery ajax tutorials and attempting to incorporate it with my Play! app but I'm not quite understanding a few things. Is it possible someone could explain how to do the following through Ajax calls:  </p>
  
  <p>1) Suppose I want to retrieve a list of Contacts from a controller (each Contact has name, phone, email).  Does the controller need to "build" the proper response for the template? What does the controller look like?  What does the javascript look like to retrieve it?</p>
  
  <p>2) For adding/updating a new Contact through an ajax call, what does the javascript look like?</p>
  
  <p>Here is code for an example of the explanation above (not using ajax):</p>
  
  <hr>
  
  <p><strong>Controller:</strong></p>
  
  <pre>
  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();
  }
  </pre>
  
  <p><br/></p>
  
  <p><strong>Template (lists all contacts):</strong></p>
  
  <pre>
  #{list contacts, as:'contact'}
  
      ${contact.name}
      ${contact.phone}
      ${contact.email}
  
  #{/list}
  </pre>
  
  <p><br/></p>
  
  <p><strong>Template (add contact):</strong></p>
  
  <pre>#{form @Contacts.add(), id:'form'}</pre>
  
  <pre><code>&lt;input type="text" name="name" /&gt;
  &lt;input type="text" name="phone" /&gt;
  &lt;input type="text" name="email" /&gt;
  &lt;input type="submit" value="Add" /&gt;
  </code></pre>
  
  <pre>#{/form}</pre>