簡單的java AJAX Json 級聯顯示

阿新 • • 發佈：2019-01-17

1.省級實體類 Province.java

import java.util.List;

public class Province {

public Province(int p_ID,String name){
this.p_ID=p_ID;
this.name=name;
}
private int p_ID;
private String name;
List<City> citys;
public int getP_ID() {
return p_ID;
}
public void setP_ID(int p_ID) {
this.p_ID = p_ID;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<City> getCitys() {
return citys;
}
public void setCitys(List<City> citys) {
this.citys = citys;
}

}

2.市級實體類 City.java

public class City {

private int c_ID;
private String name;
public City(int c_ID,String name){
this.c_ID=c_ID;
this.name=name;
}
public int getC_ID() {
return c_ID;
}
public void setC_ID(int c_ID) {
this.c_ID = c_ID;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}

}

3.服務端Servlet select_citys.java

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;

public class select_citys extends HttpServlet {
List<Province> provinces=new ArrayList<Province>();
@Override
public void init() throws ServletException {

List<City> heBei_citys=new ArrayList<City>();
heBei_citys.add(new City(1, "石家莊"));
heBei_citys.add(new City(2, "保定"));
heBei_citys.add(new City(3, "唐山"));
heBei_citys.add(new City(4, "秦皇島"));
heBei_citys.add(new City(5, "邢臺"));
List<City> heNan_citys=new ArrayList<City>();
heNan_citys.add(new City(1, "鄭州"));
heNan_citys.add(new City(2, "洛陽"));
heNan_citys.add(new City(3, "開封"));
heNan_citys.add(new City(4, "新鄉"));
heNan_citys.add(new City(5, "安陽"));
heNan_citys.add(new City(6, "商丘"));
List<City> shanDong_citys=new ArrayList<City>();
shanDong_citys.add(new City(1, "濟南"));
shanDong_citys.add(new City(2, "青島"));
shanDong_citys.add(new City(3, "煙臺"));
shanDong_citys.add(new City(4, "日照"));
shanDong_citys.add(new City(5, "菏澤"));
shanDong_citys.add(new City(6, "聊城"));
shanDong_citys.add(new City(7, "淄博"));

Province heBei=new Province(1,"河北");
heBei.setCitys(heBei_citys);
Province heNan=new Province(2,"河南");
heNan.setCitys(heNan_citys);
Province shanDong=new Province(3,"山東");
shanDong.setCitys(shanDong_citys);

provinces.add(heBei);
provinces.add(heNan);
provinces.add(shanDong);
super.init();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("do doGet");
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

int pid=Integer.parseInt(request.getParameter("p_id"));
System.out.println("do doPost "+pid);
StringBuffer sb=new StringBuffer();
sb.append("[{\"CityId\":0,\"CityName\":\"請選擇\"}");
for(int i=0;i<provinces.size();i++){
if(pid==provinces.get(i).getP_ID()){
List<City> citys=provinces.get(i).getCitys();
for(int j=0;j<citys.size();j++){
City city=citys.get(j);
sb.append(",{\"CityId\":"+city.getC_ID()+",\"CityName\":\""+city.getName()+"\"}");
}
break;
}
}
sb.append("]");

response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
out.write(sb.toString());
} finally {
out.close();
}
}

}

4.前端index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</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 type="text/javascript">

var xmlHttpRequest;
function createXmlHttpRequest(){
if(window.ActiveXObject){//如果是IE瀏覽器
//alert("是");
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){ //非IE瀏覽器
//alert("非");
return new XMLHttpRequest();
}
}
//回撥函式
function callBack(){
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
var josn = xmlHttpRequest.responseText;
//String轉換為json格式
var resultJson = eval("("+josn+")");
alert(resultJson.length);
var city=document.getElementById("city");
//刪除所有option節點
city.options.length=0;
//刪除某個位置的節點如下是刪除
//ciy.options.remove(0);

//迴圈新增option節點
for(var i=0;i<resultJson.length;i++){
//city.add(new Option("文字","值")); //這個只能在IE中有效
city.options.add(new Option(resultJson[i].CityName,resultJson[i].CityId)); //這個相容IE與firefox
}
alert("end");
}
}
//觸發事件
function selectCity(provinceNum){
var url="servlet/citys?p_id="+provinceNum; //這裡寫上跳轉的路徑,並把引數傳進去
xmlHttpRequest=createXmlHttpRequest();
xmlHttpRequest.open("POST",url,true); //true是非同步請求
xmlHttpRequest.send(null);
xmlHttpRequest.onreadystatechange=callBack;//指定回撥函式
}
</script>
</head>

<body>
  靜態標記：<input type="text">
<form action="">
  省份：
<select id="province" onchange="selectCity(this.value)">
<option value="0">請選擇</option>
<option value="1">河北</option>
<option value="2">河南</option>
<option value="3">山東</option>
</select>     
市區：
<select id="city">
<option value="0">請選擇</option>
</select>
</form>
</body>
</html>

簡單的java AJAX Json 級聯顯示

簡單的java AJAX Json 級聯顯示

使用jQuery+ajax實現級下拉列表的級聯顯示

Ajax 實現級聯下拉框

三、在JSP頁面對LIST物件級聯顯示

ajax寫級聯效果，動態從資料庫獲取資料

angularjs簡單的接收json資料並顯示

一個簡單的ajax獲取json的例子

使用postgre數據庫實現樹形結構表的子-父級叠代查詢，通過級聯菜單簡單舉例

Java函數的聯級調用

Ajax級聯選擇框

php+jquery+ajax+json的一個最簡單實例

ajax 2級級聯下拉框

ajax從伺服器端取到json，直接顯示json的元素，卻為undefined的問題

ajax級聯省市區

mysql 級聯刪除【簡單詳細】

簡單的級聯下拉(作為工作中的一點總結~)

根據json資料動態生成無限級聯(demo三層陣列迴圈,形成三級聯動)

Ajax提高篇（7）Ajax實現簡單的下拉框聯動顯示資料

Java對JSON的簡單操作

簡單java單例模式（單擊多次，如何讓視窗只顯示一次）

簡單的java AJAX Json 級聯顯示

相關推薦