这几天边看<锋利的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");
分享到:
相关推荐
NULL 博文链接:https://cxl2012.iteye.com/blog/1551273
Servlet利用Ajax,JQuery交互Json
Jquery+ajax+json+servlet
Java+Servlet+Jquery+Json基础示例
JQuery getJSON() 调用Servlet简单例子
jquery ajax servlet json简单demo
前台使用简单的jquery技术,后台采用servlet,使用json方式进行数据的传输
Servlet+jsp+js(Jquery)+json实现分页,自己写的,比较完美的分页!!so easy 不像网上写的那么复杂!代码容易理解!思路清晰!有需要的童鞋可以拿去看看。
jquery下的ajax向后台servlet传输数据并从后台获得数据源码实例且有详细注释
JSON JQuery + Servlet +Json实现下拉框级联 json-lib-2.4-jdk15.jar所依赖jar的整理整理
JavaEE|JavaSE6|Servlet|jQuery|Json|API文档打包下载,极大的方便了开发。 欢迎下载。另有大量的Java开发方面的电子和源码,有需要的请留下邮件,我会发给你们的。 谢谢。
JSON+Jquery+servlet+jsp+ajax例子,方便学习的人。
在servlet中生成List数据集合,通过jquery将数据填充在前台页面的表格中
利用jQuery+Ajax+json从数据库获取数据,将获取的数据利用json格式传递,实现select控件三级联动;内附数据库sql脚本。
1.纯servlet+jquery局部刷新; 2.fresh 后台包含 json内容,需要json相关jar包,自行下载,不需要的可以删除; 3.有页面点击事件,初学者可以研究下; 4.QQ569317668 不喜勿喷 servlet局部刷新及json字符串 相互学习...
jquery1.7 c3p0 mysql fastjson servlet 一个简单的jquey和json示例
学习JSON 的同学们快来哟学习JSON 的同学们快来哟学习JSON 的同学们快来哟
NULL 博文链接:https://lw671579557.iteye.com/blog/1897568
java,Tomcat,mysql,jsp常用jar包, json,jsp,servlet,jslt,standard,jquery,mysql
公交线路搜索系统,mysql+jdbc+servlet+freemarker+json+jquery+arttemplate+百度地图api