如何使用jQuery转换JSON数据

原创|其它|编辑:郝浩|2012-09-03 14:42:07.000|阅读 449 次

概述:只需要简单几个步骤和MyEclipse IDE,便可以使用jQuery将数据转换为JSON数据,并展示JSON数据的反馈,这个教程能够帮助广大JAVA开发者更深入的MVC 设计模式(Model View Controller pattern)。

只需要简单几个步骤和MyEclipse IDE,便可以使用jQuery将数据转换为JSON数据,并展示JSON数据的反馈,这个教程能够帮助广大JAVA开发者更深入的MVC 设计模式(Model View Controller pattern)。

数据库

示例数据库信息表包含两列msg_id和消息。

第1步

创建一个新的包DTO(数据交易对象)。

右键单击SRC - >“新建”,然后选择“Package”。

如何使用jQuery转换JSON数据

给Package命名,然后单击“完成”。

第2步

现在,你必须创建一个类,右键单击DTO - >新建 - 类(Class)

如何使用jQuery转换JSON数据

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,只需右键点击的代码。

如何使用jQuery转换JSON数据

转到资源(Source),然后选择生成Getter和Setter

如何使用jQuery转换JSON数据

后续的弹出窗口出现后,选择事务对象,然后单击“确定”。

如何使用jQuery转换JSON数据

Eclipse会产生这样的代码,当存在大量的事务对象时,这个就会非常有用了。

如何使用jQuery转换JSON数据

第4步

你必须复制gson.jar到库文件夹,下载代码中包含这些JAR文件。

如何使用jQuery转换JSON数据

第5步

数据访问对象(DAO)包

如何使用jQuery转换JSON数据

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;

import java.sql.Connection;
import java.util.ArrayList;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.Project;
import dto.MessageObjects;

public class ProjectManager {
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 messages = null;
try {
// Here you can validate before connecting DAO class, eg. User session condition
Project project= new Project();
messages=project.GetMessages(connection, request, response);

catch (Exception e) {
throw e;
}
return messages;
}

}

第7步

创建servlet类的控件包。

如何使用jQuery转换JSON数据

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 http://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。在以下项目地址中运行:http://localhost:8080/SecondProject/index.jsp



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:本站原创

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
MyEclipse

功能最全面、性价比最高的Java IDE之一

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat