`

servlet + jquery ajax + json demo

ServletAjaxjsonjQueryJavaEE 
阅读更多

1. 相应的jar包的导入. json-lib-2.2.3-jdk15.jar, ezmorph-1.0.6.jar等.

 

2. 加入jquery.js

 

3. jquery each()方法的使用api.

    http://api.jquery.com/jQuery.each/

 

4. 服务端servlet程序

 

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class JqueryAjaxServer extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		response.setContentType("text/html;charset=utf-8");
		String account = request.getParameter("account");
		
		JSONObject json = new JSONObject();
		
		JSONArray array = new JSONArray();
		JSONObject member = null;
		for (int i = 0; i < 3; i++) {
			member = new JSONObject();
			member.put("name", "xiaohua"+i);
			member.put("age", 20+i);
			array.add(member);
		}
		
		json.put("account", account);
		json.put("jsonArray", array);
		
		PrintWriter pw = response.getWriter(); 
		pw.print(json.toString());
		
		System.out.println("json array :"+array.toString());
		System.out.println("json object :"+json.toString());
		
		pw.close();
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws IOException, ServletException {
		this.doGet(request, response);
	}
}
 

5. jsp页面(jqueryAjax.jsp)

 

 

<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery ajax</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="jquery/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript">
	$(function(){
		$('.sumbit').click(function(){
			if($('#account').val().length==0){
				$('.hint').text("用户名不能位空").css({"background-color":"green"}); 
			}else{
				$.ajax({
					url:'jqueryAjax',
				    data:{account:$('#account').val()},
				    dataType:'json', //很重要!!!.		预期服务器返回的数据类型
				    error:function(){
				    	alert("error occured!!!");
					},
				    success:function(data){
				    	$.each(data.jsonArray,function(index){
				    		$.each(data.jsonArray[index],function(key,value){
				    			alert(key+":"+value)
				    		});
				    	});
				    	
				        $('body').append("<div>"+data.account+"</div>").css("color","red");
				    }
				});
			}
		});
	});
</script>
</head>

<body>
<h3 align="center">jquery AjaX</h3>
<hr>
<label>请输入你的账户 ：</label>
<input id="account" name="account" type="text">
<input class="sumbit" type="button" value="检测">
<div class="hint"></div>
</body>
</html>

 

6. 配置文件web.xml

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<servlet>
	   <servlet-name>jqueryAjaxServer</servlet-name>
	   <servlet-class>com.june.servlet.JqueryAjaxServer</servlet-class>
	</servlet>
        <servlet-mapping>
	   <servlet-name>jqueryAjaxServer</servlet-name>
	   <url-pattern>/jqueryAjax</url-pattern>
	</servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
 

 

分享到：
| PrintWriter 中 write() 与 print() 的区 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics