Read JSON form Server Part 2


Use Ajax Read JSON form Server.

tham khảo link trên để viết tiếp cho bài này :

Chúng ta tạo ra 1 Servlet ShowMap.java cho việc send JSON về cho JSP client như sau :


protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 Map<String, String[]> mapProduct = new HashMap<String, String[]>();
 String[] top5 = {"Item 1","Item 2","Item 3","Item 4","Item 5"};
 String[] top10 = {"Item 6","Item 7","Item 8","Item 9","Item 10"};
 mapProduct.put("TOP-1", top5);
 mapProduct.put("TOP-2", top10);

 response.setHeader("Cache-Control", "no-cache");
 response.setHeader("Pragma", "no-cache");
 response.setContentType("text/javascript");

 PrintWriter out = response.getWriter();
 JSONObject mapJSON = new JSONObject(mapProduct);
 System.out.println(mapJSON);
 out.print(mapJSON);


 }

 

Ok sau đây là chuổi JSON khi chạy sẻ như thế này :

{“TOP-2”:[“Item 6″,”Item 7″,”Item 8″,”Item 9″,”Item 10″],”TOP-1”:[“Item 1″,”Item 2″,”Item 3″,”Item 4″,”Item 5”]}

Viết function của js cho việc get data trả về từ  server  :

file json-generat-example.js các bạn viết tiếp vào file này :



function showMapProduct(address, resultRegion) {
 ajaxPost(address, null,
 function(request) {
 showMapInfo(request, resultRegion);
 });
}


function showMapInfo(request, resultRegion) {
 if ((request.readyState == 4) &&
 (request.status == 200)) {
 var rawData = request.responseText;
 var productTypes = eval("(" + rawData + ")");
 var headings = new Array();
 var row1Entries = new Array();
 var i = 0;
 for(var productType in productTypes) {
 headings[i] = productType;
 row1Entries[i] = getBulletedList(productTypes[productType]);
 i++;
 }
 var rows = [row1Entries];
 var result = getTable(headings, rows);
 htmlInsert(resultRegion, result);
 }
}

 

ok trang client như sau :  index.jsp add code sau vào :


<fieldset>
 <legend>Generate Map JSON</legend>
 <input type="button" value="Show Map" onclick="showMapProduct('ShowMap','table')">
 </fieldset>
 <br/>
 <div id="table">
 </div>

 

ok kết quả sau khi chạy là :

d1

 

ok chúc các bạn thành công .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: