ajax和jquery简单应用

servlet

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


response.setContentType("text/html");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String param=request.getParameter("param");
int i=Integer.parseInt(param);
PrintWriter out = response.getWriter();
if(i==1){
String json="{\"city\":[{\"id\":1,\"name\":\"徐州\"}," +
"{\"id\":2,\"name\":\"南京\"}," +
"{\"id\":3,\"name\":\"苏州\"}]}";
out.println(json);
}else if(i==2){
String json="{\"city\":[{\"id\":1,\"name\":\"济南\"}," +
"{\"id\":2,\"name\":\"济宁\"}," +
"{\"id\":3,\"name\":\"青岛\"}]}";
out.println(json);
}else if(i==3){
String json="{\"city\":[{\"id\":1,\"name\":\"杭州\"}," +
"{\"id\":2,\"name\":\"温州\"}," +
"{\"id\":3,\"name\":\"嘉兴\"}]}";
out.println(json);
}else{

String json="{\"city\":[{\"id\":-1,\"name\":\"请选择城市\"}]}";
out.println(json);


};

}

$(function(){

  
  $.ajax({
  url:"servlet/loadprovinceServlet",
  type:"POST",
  data:{},
  dataType:"json",
  success:function(data){
  
 
   for(var i=0;i<data.pro.length;i++){
  var temp=data.pro[i];
  var $option=$("<option value='"+temp.id+"'>"
+temp.name+"</option>");
$("#province").append($option);
  
  }


  },
  
  
  error:function(){
  
  alert("内部错误！!");
  }
  
  });
  $("#province").change(function(){
  
    var temp2=$("#province option:selected").val();
  $.ajax({
  url:"servlet/loadcityservlet",
  type:"POST",
  data:{"param":temp2},
  dataType:"json",
   success:function(data){
    $("#city").empty();
 
   for(var i=0;i<data.city.length;i++){
  var temp1=data.city[i];
  var $option1=$("<option value='"+temp1.id+"'>"
+temp1.name+"</option>");
$("#city").append($option1);

  }
   },
   error:function(){
  
  alert("内部错误！!");
  }
  
  
  
  });
  
});