小賴的實戰記錄

這東西真的沒這麼好容易就湊出來，感覺網路文章，沒講的很清楚，害我try了老半天。(感覺也是英文太差的關係導致）

可參考這篇文章

http://www.playframework.org/documentation/1.2/ajax

花了不久時間終於試出來了。

首先，這篇文章，沒有提到如何製作json，也沒提到需要加一個html，或許他認為這是一個common sence，

對我來講，或許就是資料講的不夠多，

 

如果我們要做一個jquery ajax的功能，

首先在Controller ，加入 一個action (method)  

例：information

    public static void information(final String server_type)
    {
            MySQLAdodb adodb = new MySQLAdodb(server_type);
            render(adodb);
    }

而要在view，加入一個相對的html 

information.html

{
"db_name":  ${adodb.db_name},
"user_name":  ${adodb.user_name},
"password":  ${adodb.password},
  "server_ip":  ${adodb.server_ip}
}

然後可以設定route，將某個很直接的網址，對應Controller.action

開始conf/route設定檔

撰寫

GET /information.json            Config.information  

然後開始撰寫javascript端的JQuery 呼叫，目前試出以下三種方式皆可。

其中Config是，Config Controller

   var listAction = #{jsAction @Config.information(':server_type') /}

   $('#result').load(
       listAction({server_type: 'local'}),
       function() {
           $('#content').css('visibility', 'visible')
       }
   );

   $.post(listAction({server_type:'local'}), function(data) {
      $('#result2').html(data);
   });

   $.ajax({
      url: "information.json",
      type: 'GET',
      data: {
        server_type:'local'
      },
      error: function(xhr) {
        alert('Ajax request 發生錯誤');
      },
      success: function(response) {
          $('#result3').html(response);
      }
   });

html tag如下

<div id="content">
<div id="result"></div>
</div>
<div id="content2">
<div id="result2"></div>
</div>
<div id="content3">
<div id="result3"></div>
</div>

 

如果是要取得JOSN的話，應該是不用html，而是直接呼叫

 renderJSON(adodb);

但相對的JQuery端的限制，

就是ajax必須設定 datatype為json

或使用$.getJSON

網路上有寫為何$.getJSON會出錯，那是因為$.getJSON並需搭配renderJSON(adodb);才能運作。

 

以下是讀JSON的方式。

java端

    public static void informationJSON(final String server_type)
    {
            MySQLAdodb adodb = new MySQLAdodb(server_type);
            renderJSON(adodb);
    }

javascript

   $.ajax({
     url: "informationJSON.json",

     type: "GET",
      data: {
        server_type:'local'
      },
     dataType: "json",

     success: function(Jdata) {           
        $('#result4').html(Jdata['db_name']);
     },
       error: function() {
       alert("ERROR!!!");
     }
   });
$.getJSON('informationJSON.json?server_type=local', function(data) {
            $('#result4').html(data['db_name']);
         });

route 則是

GET /informationJSON.json            Config.informationJSON  

html 則是

<div id="content3">
<div id="result3">123</div>
</div>
<div id="content4">
<div id="result4">123</div>
</div>

 

a simple value with json example

Java

    public static void getCountryMaxId(final String country) {
        String max_id = country + "_"+10;
        Object[] array = {max_id};
        renderJSON(array);
    }

 

Javascript

                alert("getJSON");
                $.getJSON('getCountryMaxId?country=local', function(data) {
                     alert('json sucess');
                     alert(data[0]);
                });


                $.ajax({
                    //url: "http://localhost:9000/Package/getCountryMaxId",
                    //url: "/Package/getCountryMaxId",
                    url: "getCountryMaxId",
                    type: "GET",
                    data: {
                       country:'local'
                    },
                    dataType: "json",
                    success: function(data) {
                        alert('sucess');
                        alert(data[0]);
                    },
                      error: function() {
                      alert("ERROR!!!");
                    }
                  });