我一直在筛选许多jQuery ajax教程,并尝试将其与我的Play相结合！应用程序,但我不太了解一些东西.有可能有人可以通过Ajax调用解释如何执行以下操作：
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 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}
解决方法
我不熟悉Play方面的东西,但如果您想通过Ajax调用检索一些JSON数据,则控制器可能看起来像：
public static void getContacts() {
List<Contact> contacts = // get contacts here...
renderJSON(contacts);
}
检索JSON数据的jQuery将如下所示：
// 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!");
});
});
