10

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

1）假设我想从控制器中检索联系人列表（每个联系人都有姓名、电话、电子邮件）。控制器是否需要为模板“构建”正确的响应？控制器长什么样？检索它的 javascript 是什么样的？

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

以下是上述解释示例的代码（不使用 ajax）：

控制器：

公共静态无效列表（）{
    列出联系人= Contact.fetchAll();
    渲染（联系人）；
}

公共静态无效添加（字符串名称，字符串电话，字符串电子邮件）{
    联系人联系人 = 新联系人（）；
    联系人姓名 = 姓名；
    联系电话=电话；
    contact.email = 电子邮件；
    联系人.保存（）；
}

public static void update(Long id, String name, String phone, String email) {
    联系人联系人 = Contact.findById(id);
    联系人姓名 = 姓名；
    联系电话=电话；
    contact.email = 电子邮件；
    联系人.保存（）；
}


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

#{列出联系人，如：'联系人'}

    ${联系人姓名}
    ${联系电话}
    ${contact.email}

＃{/列表}


模板（添加联系人）：

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

＃{/形式}
4

3 回答 3

13

我不熟悉 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!");
    });
});

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

于 2010-11-24T21:17:08.487 回答
1

这是使用 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>
于 2014-02-16T07:28:41.390 回答
0

下载 play 并查看他们的预订示例，这似乎完全符合您的要求，并且是他们使用 jsaction 的一个很好的示例....（另外您可以自己运行它）。

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

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

于 2012-02-04T17:50:22.230 回答