原創|其它|編輯:郝浩|2012-09-03 14:42:07.000|閱讀 613 次
概述:只需要簡單幾個步驟和MyEclipse IDE,便可以使用jQuery將數據轉換為JSON數據,并展示JSON數據的反饋,這個教程能夠幫助廣大JAVA開發者更深入的MVC 設計模式(Model View Controller pattern)。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
只需要簡單幾個步驟和MyEclipse IDE,便可以使用jQuery將數據轉換為JSON數據,并展示JSON數據的反饋,這個教程能夠幫助廣大JAVA開發者更深入的MVC 設計模式(Model View Controller pattern)。
數據庫
示例數據庫信息表包含兩列msg_id和消息。
第1步
創建一個新的包DTO(數據交易對象)。
右鍵單擊SRC - >“新建”,然后選擇“Package”。
給Package命名,然后單擊“完成”。
第2步
現在,你必須創建一個類,右鍵單擊DTO - >新建 - 類(Class)
MessageObjects.java
在這里,你必須聲明所有的事務對象(transaction objects),本教程中的事務對象是msg_id和消息
package dto; public class MessageObjects { //Message Objects private String msg_id; private String message; //Getters and Setters } |
第3步
你必須生成getter和setter,只需右鍵點擊的代碼。
轉到資源(Source),然后選擇生成Getter和Setter
后續的彈出窗口出現后,選擇事務對象,然后單擊“確定”。
Eclipse會產生這樣的代碼,當存在大量的事務對象時,這個就會非常有用了。
第4步
你必須復制gson.jar到庫文件夾,下載代碼中包含這些JAR文件。
第5步
數據訪問對象(DAO)包
Project.java
用ArrayList數據類型創建一個GetMessages,使用select語句從消息表中得到結果,再將結果綁定到messageData對象。
package dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.util.ArrayList; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import dto.MessageObjects; public class Project { public String InsertMessage(Connection connection, HttpServletRequest request, HttpServletResponse response) throws Exception { // Previous Post } public ArrayList GetMessages(Connection connection,HttpServletRequest request,HttpServletResponse response) throws Exception { ArrayList messageData = new ArrayList(); try { PreparedStatement ps = connection.prepareStatement("SELECT msg_id,message FROM messages ORDER BY msg_id DESC"); ResultSet rs = ps.executeQuery(); while(rs.next()) { MessageObjects messageObject = new MessageObjects(); messageObject.setMsg_id(rs.getString("msg_id")); messageObject.setMessage(rs.getString("message")); messageData.add(messageObject); } return messageData; } catch(Exception e) { throw e; } } } |
第6步
模型類模型包
ProjectManager.java
在這里,你必須編寫業務邏輯,例如:用戶會話驗證
package model; } |
第7步
創建servlet類的控件包。
GetMessages.java
轉換messageData對象的數據為JSON數據格式。在WEB-INF目錄下的web.xml文件里面添加servlet類映射。在WEB-INF目錄下的web.xml文件里面添加servlet類映射。
package controls; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.util.ArrayList; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import dao.Database; import model.ProjectManager; import dto.MessageObjects; @WebServlet("/GetMessages") public class GetMessages extends HttpServlet { private static final long serialVersionUID = 1L; public GetMessages() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { Database database= new Database(); ProjectManager projectManager= new ProjectManager(); ArrayList messagesData = null; Connection connection = database.Get_Connection(); messagesData = projectManager.GetMessages(connection, request, response); Gson gson = new Gson(); String messages = gson.toJson(messagesData); out.println("{\"Messages\":"+messages+"}"); } catch (Exception ex) { out.println("Error: " + ex.getMessage()); } finally { out.close(); } } |
從信息數據中獲取JSON輸出
{ "Messages":[ { "msg_id":"3", "message":"Everything is possible. " }, { "msg_id":"2", "message":"9lessons Programming Blog //9lessons.info" }, { "msg_id":"1", "message":"Make People fall in love with Your Ideas" } ] |
第8步
最后一步,使用jQuery顯示JSON數據。
index.jsp
使用$.AJAX調用GetMessages servlet,然后讀取所有有$.的JSON數據,再數據添加到內容的div。
<script type="text/javascript" src='js/jquery.min.js'></script> <script type='text/javascript'> $(document).ready(function() { $.ajax ({ type: "GET", url: "GetMessages", dataType:"json", success: function(data) { if(data.Messages.length) { $.each(data.Messages, function(i,data) { var msg_data="<div id='msg"+data.msg_id+"'>"+data.message+"</div>"; $(msg_data).appendTo("#content"); }); } else { $("#content").html("No Results"); } } }); $('#UpdateButton').click(function() { // Previous Post }); return false; }); }); </script> //HTML Code <textarea id='Message'></textarea><br/> <input type='button' value=' Update ' id='UpdateButton'/> <div id='content'></div> |
第9步
您可以下載中心WAR文件并導入到Eclipse IDE。在以下項目地址中運行://localhost:8080/SecondProject/index.jsp
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:本站原創