Jquery 简单的ajax与Play！

我一直在筛选许多jQueryAjax教程，并试图将其与我的游戏结合起来！但我不太了解一些事情。是否有人可以解释如何通过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 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'} 公共静态无效列表（）{ List contacts=Contact.fetchAll（）； 提供（联系人）； } 公共静态无效添加（字符串名称、字符串电话、字符串电子邮件）{ 触点=新触点（）； contact.name=姓名； contact.phone=电话； contact.email=电子邮件； contact.save（）； } 公共静态无效更新（长id、字符串名称、字符串电话、字符串电子邮件）{ 联系人=Contact.findById（id）； contact.name=姓名； contact.phone=电话； contact.email=电子邮件； contact.save（）； }

模板（列出所有联系人）：

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'} #{列出联系人，如：'contact'} ${contact.name} ${contact.phone} ${contact.email} #{/list}

模板（添加联系人）：

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'} #{form@Contacts.add（），id:'form'}

---

#{/form}我不熟悉游戏方面的内容，但是如果您想通过Ajax调用检索一些JSON数据，那么控制器可能看起来像：

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

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

要添加/更新联系人，您可以执行以下操作：

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

// 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

函数是更灵活的应用程序的快捷方式。查看更多选项。

下载play并查看他们的预订示例，该示例似乎与您正在寻找的非常接近，是他们使用jsaction的一个很好的示例……（另外，您可以自己运行它）

---

基本上，在我看来，他们有一个html文件，他们只是将返回的html插入到页面的div中，在目标html页面上，div是空的，他们用play中的另一个html文件填充它。（所有内容都在预订示例中）。

下面是使用scala将ajax与json结合使用的简单示例

下面是使用ajax的json代码

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

@（list:list[User]）（隐式会话：play.api.mvc.session）
@主要（“”）{
@如果（列表大小>0）{
@比如（我说“它应该是什么样子的？”-嗯，我喜欢毛茸茸的、有大耳朵的……哦，等等，我们不是在谈论泰迪熊吗？好吧，然后发布你的代码，这样我们就可以知道它现在是什么样子了。好吧，以控制器和模板代码为例（不使用ajax）。从游戏的角度来看，差不多就是这样。将这些路由添加到您的路由文件，就这样。谢谢大家。这正是我所需要的。祝您感恩节快乐=）最好避免在javascript中硬造URL。使用jsAction标记（）这将返回一个JavaScript函数，该函数基于服务器操作和自由变量构造URL。谢谢Shiva。这是一篇旧文章，您可以发布您正在使用的游戏版本吗？可能对遇到此问题的用户有好处。谢谢！