jQuery中JSON与Servlet应用小例

   这几天边看<锋利的jQuery>边学jQuery，越发觉得jQuery确实是个非常好的js框架。jQuery中通过get,post,ajax等方法与服务器之间进行异步通行，非常简单与方便。

 jQuery中 通常数据通信的格式有XML,HTML,JSON和TEXT等。

XML：好处是格式通用，提高重用性。坏处则是相对解析之类的较慢，对于只传递少量数据有点浪费。

JSON：好处就是解决了XML中文档体积大和难以解析的问题，并且也具有重用性。

下面我主要介绍下自己所写的一个jQuery与servlet之间通信的例子，数据格式采用的是JSON。

1.下载相应的包。需要使用JSON则需要下载相应的jar，下载地址为http://www.json.org.注意，这里除了需要对应JDK下载json.jar外，还需要下载一些额外的jar包（请见附件）。

2.将相应的包添加到当前项目路径中，此外还需要将这些jar文件放到tomcat/lib下。如果不放则会报无法找到相应类的异常。

3.在form.jsp下编写异步提交表单的jQuery代码：

$("#submitButton").click(function(){
		 $.get("myservlet/getdata",//servlet URL
                        {username:$( "#username").val()},//表单中的值
		   function(data,statusText){//相应函数
		         var jsonvars=data.mydata;//返回JSON数据
			for(var i=0;i<jsonvars.length;i++)
			{	$("#dataDiv").append"<div>"+jsonvars[i].name+jsonvars [i].age+"</div>");		}
	          },"json");
	});	
   });

4.servlet端代码

package com.hj.ajax.servlets;

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;
import net.sf.json.JSONObject;

public class GetDataServlet extends HttpServlet
{

	/**
	 * 串行化版本序号
	 */
	private static final long serialVersionUID = 6643682700511421833L;

	/**
	 * The doGet method of the servlet. <br>
	 * 
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request
	 *            the request send by the client to the server
	 * @param response
	 *            the response send by the server to the client
	 * @throws ServletException
	 *             if an error occurred
	 * @throws IOException
	 *             if an error occurred
	 */
	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{

		doPost(request, response);
	}

	/**
	 * The doPost method of the servlet. <br>
	 * 
	 * This method is called when a form has its tag value method equals to
	 * post.
	 * 
	 * @param request
	 *            the request send by the client to the server
	 * @param response
	 *            the response send by the server to the client
	 * @throws ServletException
	 *             if an error occurred
	 * @throws IOException
	 *             if an error occurred
	 */
	@Override
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{
		response.setContentType("text/html;charset=utf-8");
		String username = request.getParameter("username");

		System.out.println(username);

		JSONObject json = new JSONObject();
		JSONArray array = new JSONArray();
		JSONObject member = null;
		for (int i = 0; i < 5; i++)
		{
			member = new JSONObject();
			member.put("name", "xiaohua");
			member.put("age", 15);
			array.add(member);
		}

		json.put("mydata", array);
		PrintWriter pw = response.getWriter();
		pw.print(json.toString());
		pw.close();
	}

}

5.表单中文数据问题

当表单输入数据为中文是，一般为了安全起见，都使用encodeURIComponent()方法转换参数值，如

{username:encodeURIComponent($("#username").val())}.

 相应在servlet端则采用URLDecoder类的decode(src,srcCharset)方法进行转换，如jsp页面编码为utf-8,则

String username = URLDecoder.decode(request.getParameter("username"), "UTF-8");

评论

4 楼 liu2006142 2012-07-06  

   

3 楼 spp_1987 2010-10-11  

请问下，如何把前台的json值传到后台呢。

2 楼 JackAndroid 2010-01-19  

是的，写的时候不知道怎么$没了。呵呵

1 楼 lhy5201314 2009-12-21  

很好 但是这句

{username:( "#username").val()},//表单中的值   

应该写为：

{username:$("#username").val()},//表单中的值