JQuery 实现ajax 实例

先在大多数的网站都会使用AJAX技术来实现前台的验证和异步加载的实现，现在就和大家分享一下我的JQuery实现ajax的实现过程。

一、html页面

	
   
   
	<script src="jquery-2.0.0.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {//包含jquery所有的函数
			$("#s1").change(function(event) {
				//get方法$get(URL,DATA,CALLBACK,DATATYPE),(请求路径，要发送的数据，执行完成后的回调函数(可选），数据类型（可选）)
				$.get('city2.do', {name: $("#s1").val()}, function(data, textStatus, xhr) {
					var citys=$.parseJSON(data);
					$("#s2").empty();
					for(var i=0;i
   
   

	
    
    湖南北京
    
    
    



   
   

二、servlet

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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 bean.Option;

public class ActionServlet extends HttpServlet {

	public void service(HttpServletRequest request, 
	          HttpServletResponse response)
	      throws ServletException, IOException {
	    String uri = request.getRequestURI();
	    String path = uri.substring(uri.lastIndexOf("/"),
	            uri.lastIndexOf("."));
	    response.setContentType("text/html;charset=utf-8");
	    PrintWriter out = response.getWriter();
	    if(path.equals("/city")){
	        String name = request.getParameter("name");
	        if(name.equals("bj")){
	            Option op = new Option("海淀","hd");
	            Option op2 = new Option("东城","dc");
	            Option op3 = new Option("西城","xc");
	            List ops = new ArrayList();
	            ops.add(op);
	            ops.add(op2);
	            ops.add(op3);
	            JSONArray obj = JSONArray.fromObject(ops);
	            String str = obj.toString();
	            out.println(str);
	        }else if(name.equals("hn")){
	            Option op = new Option("怀化","hh");
	            Option op2 = new Option("长沙","cs");
	            Option op3 = new Option("岳阳","yy");
	            List ops = new ArrayList();
	            ops.add(op);
	            ops.add(op2);
	            ops.add(op3);
	            JSONArray obj = JSONArray.fromObject(ops);
	            String str = obj.toString();
	            out.println(str);
	        }
	  
	    out.close();
	  }

}

后台使用servlet实现并且以json的形式返回数据，关于java中的数据转换为json的形式，详见http://blog.csdn.net/eternity0_0/article/details/23468593