一个find表里面的数据,用下拉列表的形式呈现出来: fatherids是一个父级id,连着IDS
index.jsp
<body>
<!-- <h1>欢迎!</h1> -->
省
<select id="province">
</select>
市
<select id="city">
</select>
区
<select id="area">
</select>
</body>
/**
*
* @author user
* 把数据库里面的find表里面的列抽象成一个数据模型
*/
public class Find {
private String ids ;
private String ming;
private String fatherids;
public Find() {
super();
}
public Find(String ids, String ming, String fatherids) {
super();
this.ids = ids;
this.ming = ming;
this.fatherids = fatherids;
}
public String getIds() {
return ids;
}
public void setIds(String ids) {
this.ids = ids;
}
public String getMing() {
return ming;
}
public void setMing(String ming) {
this.ming = ming;
}
public String getFatherids() {
return fatherids;
}
public void setFatherids(String fatherids) {
this.fatherids = fatherids;
}
@Override
public String toString() {
return "Find [ids=" + ids + ", ming=" + ming + ", fatherids=" + fatherids + "]";
}
}
/**
*
* @author user
* 三级联动中查询数据库里面的内容
*/
public class FindMethod {
private Connection coon;
private PreparedStatement ps;
private ResultSet rs;
/**
*
* @param ids
* @return List<Find>
* 此方法是用来查询find表里面的信息的
*/
public List<Find> selectFind ( String ids) {
String sql = "select * from find f where f.fatherids = ?";
init(sql);
List<Find> list = null;
list = new ArrayList<Find>();
try { //此处其实可以抛出异常,在Servlet里面输出一下,这些前台也可以看见了
ps.setString(1, ids);
rs = ps.executeQuery();
while(rs.next()) {
Find find =
new Find(rs.getString("ids"),rs.getString("ming"),rs.getString("fatherids"));
list.add(find);
}
} catch (SQLException e) {
e.printStackTrace();
}
close();
return list;
}
public void init ( String sql) { //重载方法
coon = DBHelper.getConnection();
try {
ps = coon.prepareStatement(sql); //连接的是sql
} catch (SQLException e) {
e.printStackTrace();
}
}
public void close() { //关闭资源
DBHelper.destroy(coon, ps, rs);
}
}
FindServlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String ids = request.getParameter("ids");
FindMethod fm = new FindMethod();
List<Find> flist = fm.selectFind(ids);
JSONObject jo = new JSONObject();
if (flist.size() > 0) {
jo.put("success", true);
jo.put("result", flist);
} else {
jo.put("success", false);
jo.put("result", "后台异常");
}
response.getWriter().append(jo.toJSONString()); //以字符串的形式打印出来的
}
Find.js
$(function() {
$.ajax({
type:"post",
url:"FindServlet",
data:{ ids:"0"},
dataType:"json",
success:function(data) {
if(data.success) {
$("#province").empty(); //此目的是怕如果下面选择市的时候,之前选择的那个市不会再叠加
for (var i = 0; i < data.result.length; i++) {
$("#province").append("<option value='"
+data.result[i].ids+"'>"
+data.result[i].ming
+"</option>"); //向<select>追加内容
}
} else {
alert("fail");
}
},
error:function(msg) {
alert(22222222);
}
});
$("#province").change(function() { //change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。
var ids = $(this).val(); //获取当前对象里面的value
$.ajax({
type:"post",
url:"FindServlet",
data:{
ids:ids
},
dataType:"json",
success:function(data) {
if(data.success) {
$("#city").empty();
for (var i = 0; i < data.result.length; i++) {
$("#city").append("<option value='"+data.result[i].ids+"'>"+data.result[i].ming+"</option>");
}
} else {
alert("fail");
}
},
error:function(msg) {
alert(22222222);
}
});
});
$("#city").change(function() {
var ids = $(this).val();
$.ajax({
type:"post",
url:"FindServlet",
data:{
ids:ids
},
dataType:"json",
success:function(data) {
if(data.success) {
$("#area").empty();
for (var i = 0; i < data.result.length; i++) {
$("#area").append("<option value='"+data.result[i].ids+"'>"+data.result[i].ming+"</option>");
}
} else {
alert("fail");
}
},
error:function(msg) {
alert(22222222);
}
});
});
});