Home
  • About Me
  • Java基礎教學
  • 部落格聯播

prototype Ajax回傳json物件的處理

分類: ajax, javascript, jsp, prototype, 教學 時間:2010/4/25 瀏覽:3,138 瀏覽數 — 留下回應

一般人在設計ajax成功回傳事件時，有幾種方式來處理回傳的資料，一種是純文字或html code，一種是xml格式那另一種就是json格式，json格式不像xml需要成對的tag，所以在回傳資料長度上會顯的短很快，如果整個網站都大量使用ajax方法的話，選擇json是一個很好的方法。

ajaxjson2.png

json的相關資訊可以在這裡看到：JSON in JavaScript

prototype這個framework本身就有支援To JSON的方法，有二種格式可以轉換成json，一種是javascript的class，另一種就是純文字了，不過純文字的內容要為json格式才能被轉換，如下：

{"bindings": [
        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
        {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
        {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
    ]
};

所以在設計ajax response文字時，就特意的輸出成json格式的內容，再利用prototype轉成json物件，那就可以在javascript裡直接使用了。

以下用一個簡單的例子來說明，form request ajax要求一個查詢，查詢經由一個jsp做處理，處理好後輸出json格式回傳給剛才的request，接收到response後，轉換成javascript的json物件，再取出物件內容來顯示在畫面上。

底下是prototype Ajax的寫法，直接用form上的設定當成request，然後再處理responseText就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

<%@ page language="java" contentType="text/html; charset=BIG5"
    pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>查詢資料</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
var columonTitle = ["資料1","資料2","資料3","資料4"];
var columonName = ["d1","d2","d3","d4"];
function doAction()
{
 
  $('myform').request({
    onCreate: function(){
        $("Result").update("Loading~~");
    },
    onSuccess: function(transport) {
    try{
    //把回傳的字串變成json格式
      var json = transport.transport.responseText.evalJSON();
      var state = json.state;
      if(state== 0 )//json帶有一個state的狀態符號
      {
        alert("查無資料!");
      }
      else if(state <0)
      {
        alert("資料處理出現問題!");
      }
      else
      {
        var table = new Element("table",{"width":"100%","border":"1"});
        var thead = new Element("thead");
        table.appendChild(thead);
        var tr = new Element("tr");
 
        for(i = 0 ; i < columonTitle.length;i++)//把表頭加入
        {
          var td = new Element("td");
          td.update(columonTitle[i]);
          tr.appendChild(td);
        }
        thead.appendChild(tr);
 
 
        var data = json.data;//所有資料Array
 
        var tbody = new Element("tbody");
        table.appendChild(tbody)
        for(i = 0 ; i < data.length;i++)
        {
          var tr = new Element("tr");
 
 
          for(j = 0 ; j < columonTitle.length;j++)
          {
            var td = new Element("td");
            //取得json的data array資料內容,data[i].欄位
            td.update(eval("data[i]"+"."+columonName[j]));
            tr.appendChild(td);
          }
          tbody.appendChild(tr);
        }
 
        $("Result").update(table);
 
 
      }}catch(e){alert(e)};
  },
  ////出現錯誤時 
    onFailure: function(transport){
        alert("Failure!");
     },
        //完成ajax動作後
    onComplete: function(){
    }
  });
}
</script>
</head>
<body>
<form name="myform" id="myform" action="ResponseJSON.jsp" method="get">
<table>
    <tr>
        <td width="50px">條件</td>
        <td><input name="type" type="text" size="10" /></td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" onclick="doAction();"
            value="確認" /></td>
    </tr>
</table>
</form>
<div id="Result"></div>
</body>
</html>

再來是jsp內容，jsp裡直接使用JSON in Java 的class來建立就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<%@ page language="java" contentType="text/html; charset=BIG5"
    pageEncoding="BIG5"%><% 
    String type = (String)request.getParameter("type");
    if(type==null)
        type = "";
    org.json.JSONObject json = new org.json.JSONObject();
    //狀態碼,如果有問題時可以利用設這個狀態碼來回報
    json.put("state",1);
 
    org.json.JSONArray array = new org.json.JSONArray();
    json.put("data",array);
 
    if(type.equals("1"))
    {
        for(int i = 0 ; i < 5; i ++)
        {
            org.json.JSONObject mydata = new org.json.JSONObject();
            mydata.put("d1",java.lang.Math.random()*1000);
            mydata.put("d2",java.lang.Math.random()*1000);
            mydata.put("d3",java.lang.Math.random()*1000);
            mydata.put("d4",java.lang.Math.random()*1000);
            array.put(mydata);
        }
    }else
    {
        for(int i = 0 ; i < 3; i ++)
        {
            org.json.JSONObject mydata = new org.json.JSONObject();
            mydata.put("d1",java.lang.Math.random()*1000);
            mydata.put("d2",java.lang.Math.random()*1000);
            mydata.put("d3",java.lang.Math.random()*1000);
            mydata.put("d4",java.lang.Math.random()*1000);
            array.put(mydata);
        }
    }
    json.write(out);
    %>

結果大概會如下的畫面：

ajaxjson1.png

原始檔如下：


Related Posts Plugin for WordPress, Blogger...
發表時間:四月 25th, 2010 分類： ajax, javascript, jsp, prototype, 教學.
標籤： , , , ,

留下您想說的話：

CAPTCHA 驗證圖片
*