jquery - 简单的ajax与Play!

Question

我一直在筛选许多 jQuery ajax 教程，并尝试将其与我的 Play 结合起来!应用程序，但我不太明白一些事情。是否有人可以解释如何通过 Ajax 调用执行以下操作:

1) 假设我想从 Controller 检索联系人列表(每个联系人都有姓名、电话、电子邮件)。 Controller 是否需要为模板“构建”正确的响应？ Controller 是什么样子的？检索它的 JavaScript 是什么样的？

2) 通过 ajax 调用添加/更新新联系人，javascript 是什么样的？

以下是上述解释示例的代码(不使用 ajax):

<小时/>

Controller :

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

Template (lists all contacts):

#{list contacts, as:'contact'}    ${contact.name}    ${contact.phone}    ${contact.email}#{/list}

Template (add contact):

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

我不熟悉 Play 方面的事情，但如果您想通过 Ajax 调用检索一些 JSON 数据， Controller 可能如下所示:

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

您显然希望添加大量错误处理。 $.getJSON 和 $.post 函数是更灵活的 $.ajax 的快捷方式。 。查找更多选项。