您的位置：首页 > Web前端 > JQuery

简单Json实例——基于JQuery框架Ajax支持的Json操作——J2EE版本

2012-08-07 18:01 771 查看

　　Json这个东西很神奇，大家都知道。通过网络传递信息时，字符（串）是很好的选择，我们在客户和服务器两端构建的对象，通过拆解为字符串的形式而互相传输。所以我更愿意把Json理解为一种手段或者模式，目的是实现对象和字符串的转换。

　　因为我们适应了面向对象的程序编辑，所以我们希望在页面的信息处理时，也能够使用对象属性方便的操作。通过json，我们能够将服务器通过网络传递到客户端的字符串解析为对象，在客户端本地通过对象手法进行操作。

　　比如下面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> JsonCase </title>
</head>

<body>
<script type="text/javascript">
// e.g.1
// 这种方式似乎只能用[]数组才能成功转换
var stu = eval("[{'name':'nn'}]");
alert(stu[0].name);
// e.g.2
eval("var stu1 = {'name':'mm'}");
alert(stu1.name);
</script>
</body>
</html>

　　

　　json说简单也简单，上面就是很好的例子。

　　当我们有很复杂的对象和字符串需要互相转换时，我们就需要一些第三方的帮助。

　　我们需要一些jar包来帮助我们实现复杂Json转换，比如数组、XML等高级、复杂的转换。

　　

　　组件名　　　　　　下载地址
　　BeanUtils 　　　　　 http://commons.apache.org/beanutils/download_beanutils.cgi
　　Collections 　　　　 http://commons.apache.org/collections/download_collections.cgi
　　Lang 　　　　　　 http://commons.apache.org/lang/download_lang.cgi
　　Logging 　　　　　　http://commons.apache.org/logging/download_logging.cgi
　　EZMorph 　　　　　 ezmorph.sourceforge.net/（这个是项目主页，但是sourceforge在奥运期间被和谐……）
　　Json-lib 　　　　　　 sourceforge.net/projects/json-lib/files/（sourceforge被和谐，怨念……）

　　XOM　　　　　　　　 http://www.xom.nu/（如果需要实现JSON和XML之间的转换等，就必要）　　

　　JQuery　　　　　　　http://jquery.com/

　　以上的jar包我下载打包了，大家可以移步到这里下载（不包括JQuery）。

　　然后我们再取得JQuery，当然，这更加不是必要的。

　　小例子：

　　

　　我在index.jsp里有一个下拉框，在获得焦点时利用ajax发送异步请求从服务器获取数据，这里也利用了一些json的东西。

　　servlet我配置为拦截value.get。

　　我把代码贴上来大家稍微看一看，这些是十分基础的东西，只对和我一样的初学者做一个参考和备忘。

　　index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JsonCase</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function($) {
$("#record").append("当前测试页面完成加载。<br/>");
});
function getFirstFloorValue(element) {
$("#record").append("<br/>获取到信息：您将要取得第一级选项信息……");
$("#record").append("<br/>正在使用ajax为您获取数据，您可以继续停留在页面并进行其他操作。");
$.ajax({
url : "value.get",
type : "POST",
data : "action=GetFirstFloorValue",
datatype : "json",
success : function(data) {
$("#record").append("<br/>操作成功，正在为您准备数据……");
$(element).empty();
$("#record").append("<br/>清除原始数据成功！");
var ops = $.parseJSON(data);
$("#record").append("<br/>即时数据准备成功！");
for ( var i = 0; i < ops.length; i++)
$(element).append(
"<option value=\"" + ops[i] + "\">" + ops[i]
+ "</option>");
$("#record").append("<br/>更新列表成功！<br/>");
}
});

// 相比之下，此方法比上面的方法更加简洁，上面的方法具有更好的可控性
/*$.getJSON("value.get", {
"action" : "GetFirstFloorValue"
}, function(data) {
var ml = "";
$(data).each(function(i) {
ml += "<option value="+ data[i] +">" + data[i] + "</option>";
});
$(element).html(ml);
});*/
}
</script>
</head>

<body>
<div>
<h3>
此处演示使用JQuery框架ajax支持的Json来实现下来列表即时取值： <br />
本实例为单个列表的值传递，使用简单json来实现 <br /> 点击会使用ajax异步从服务器取得数据取值
</h3>
<select id="select1" onfocus=getFirstFloorValue(this)>
<option value="1">点击取值</option>
</select>
</div>
<dir>
<h3>此处显示一些记录信息：</h3>
<span id="record"></span>
</dir>
</body>
</html>

　　ValueGetController.java:

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class ValueGetController extends HttpServlet {

private static final long serialVersionUID = -1293610555518403602L;

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

request.setCharacterEncoding("GBK");
response.setContentType("text/html;charset=gbk");
PrintWriter out = response.getWriter();
String action = request.getParameter("action");
if (action.equals("GetFirstFloorValue")) {
String[] str = GetFirstFloorValue();
JSONArray ja = JSONArray.fromObject(str);
String json = ja.toString();
out.print(json);
System.out.println(json);
out.flush();
out.close();
return;
}
out.flush();
out.close();
}

private String[] GetFirstFloorValue() {
String[] str = new String[4];
str[0] = "桌面应用";
str[1] = "移动设备";
str[2] = "服务器端";
str[3] = "嵌入式开发";
return str;
}

}

　　做法和流程就是使用第三方jar包和JQuery框架提供的方法，我在界面通过JQuery的ajax发起异步ajax请求，服务器返回的json格式字符串再交由JQuery解析，转化为javascript对象便于我们通过对象手法操作。此例十分简单，也没有xml操作。但是做一个备忘是足够了。

欢迎您移步我们的交流群，无聊的时候大家一起打发时间：

或者通过QQ与我联系：

（最后编辑时间2012-08-07 17:59:53）

　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航