遊びのシンプルなajax！

StackOverflow https://stackoverflow.com/questions/4271260

  •  28-09-2019
  •  | 
  •  

質問

私は多くの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}
役に立ちましたか？

解決

私は物事のプレイ側に精通していませんが、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. 。より多くのオプションを調べてください。

他のヒント

これは、Scalaを使用してJSONでAjaxを使用してプレイしていることの簡単な例です。

ここでは、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>

プレイをダウンロードして、あなたが探していることをほぼまったく実行しているように見える彼らの予約の例を見てください。

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

基本的に、彼らはHTMLファイルを持っているように私には見え、ターゲットHTMLページでDivが空であり、再生から別のHTMLファイルでそれを記入するページのDIVに返されたHTMLを挿入するだけです。 （それはすべて予約の例にあります）。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top