Простой Ajax с Play!

Question

Я просматривал множество уроков jQuery ajax и пытался включить их в свою игру!приложение, но я не совсем понимаю некоторые вещи.Возможно ли, что кто-то может объяснить, как сделать следующее через 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'}

<input type="text" name="name" />
<input type="text" name="phone" />
<input type="text" name="email" />
<input type="submit" value="Add" />

#{/form}

Answer 1

Я не знаком со стороной Play, но если вы хотите получить некоторые данные JSON через вызов Ajax, контроллер может выглядеть примерно так:

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

JQuery для получения данных JSON будет выглядеть примерно так:

// 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 . Ищите это для большего количества вариантов.

Answer 2

вот простой пример использования ajax с json в игре с использованием scala

здесь код json с использованием ajax

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

Answer 3

Загрузите play и посмотрите на пример их бронирования, который, кажется, в точности соответствует тому, что вы ищете, и является отличным примером использования jsaction .... (плюс вы можете запустить его самостоятельно).

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

По сути, мне кажется, что у них есть HTML-файл, и они просто вставляют возвращенный HTML-файл в div страницы, которая на целевой html-странице этот div пуста, и они заполняют его.с другим HTML-файлом из игры.(это все в примере бронирования).