使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

程序员文章站 2022-04-29 12:46:13

首先我们需要先建立好数据库，将一些数据插入进去需要两张表： province：省份表 city：城市表如图：然后再在java中建立相关的实体类与之对应...

首先我们需要先建立好数据库，将一些数据插入进去

需要两张表：

province：省份表

city：城市表

如图：

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

然后再在java中建立相关的实体类与之对应

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

再然后，我们就能开始做jdbc的操作了

public class connectionfactory { 
 private static string driver; 
 private static string url; 
 private static string user; 
 private static string password; 
 static { 
  properties prop = new properties(); 
  //读取文件 
   
  try { 
   inputstream in = connectionfactory.class.getresourceasstream("./jdbc.properties"); 
    
   prop.load(in); 
   driver = prop.getproperty("jdbc.driver"); 
   url = prop.getproperty("jdbc.url"); 
   user = prop.getproperty("jdbc.user"); 
   password = prop.getproperty("jdbc.password"); 
  } catch (ioexception e) { 
   e.printstacktrace(); 
  } 
   
 } 
  
 /** 
  * 获取连接对象 
  * @return 
  */ 
 public static connection getconnection(){ 
  connection conn = null; 
   
  try { 
   class.forname(driver); 
   conn = drivermanager.getconnection(url, user, password); 
    
  } catch (exception e) { 
   throw new runtimeexception(e); 
  } 
   
  return conn; 
 } 
  
 /** 
  * 关闭资源 
  * @param conn 
  * @param pstmt 
  * @param stmt 
  * @param rs 
  */ 
 public static void close(connection conn,preparedstatement pstmt,statement stmt,resultset rs){ 
    
   try { 
    if (conn != null) { 
     conn.close(); 
    } 
     
    if (pstmt != null) { 
     pstmt.close(); 
    } 
     
    if (stmt != null) { 
     stmt.close(); 
    } 
     
    if (rs != null) { 
     rs.close(); 
    } 
   } catch (sqlexception e) { 
    throw new runtimeexception(e); 
   } 
   
 }

首先我们可以在页面加载的时候获取所有省份的信息，sql语句如下

connection conn = null; 
 preparedstatement pstmt = null; 
 province province2 = null; 
  
 @override 
 public arraylist<province> findallpro() { 
  resultset rs = null; 
  arraylist<province> pros = null; 
  try { 
   string sql = "select id,place from province"; 
   conn = connectionfactory.getconnection(); 
   pstmt = conn.preparestatement(sql); 
   pros = new arraylist<province>(); 
    
   rs = pstmt.executequery(); 
    
   while(rs.next()){ 
    province province = new province(); 
    province.setid(rs.getint(1)); 
    province.setplace(rs.getstring(2)); 
    pros.add(province); 
   } 
    
  } catch (sqlexception e) { 
   throw new runtimeexception(e); 
  } 
   
  return pros; 
 }

将查到的数据放到后台,建立一个selectedservlet类，用于接收查询到的所有省份的信息

response.setcontenttype("application/json;charset=utf-8"); 
  response.setcharacterencoding("utf-8"); 
  request.setcharacterencoding("utf-8"); 
  //创建一个place对象 
  arraylist<province> pros= new place().findallpro(); 
  printwriter out = response.getwriter(); 
  //将集合直接转换为json对象 
  out.write(jsonarray.fromobject(pros).tostring());

在这里会用到集合转换json对象，我们需要导入以下几个包

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

然后我们开始写前台页面：

<body> 
  省份:<select id="province"> 
   <option>--请选择省份--</option> 
  </select> 
   
  城市:<select id="city"> 
    <option>--请选择城市--</option> 
   </select> 
  <br/><br/> 
  <span></span> 
 </body>

然后jquery代码如下:（由于我导入的jquery版本比较低，所以使用的方法是getjson，而不是getjson）

$.getjson("selectedservlet",function(data,textstatus){ 
 var provinces = data; 
      
 var res = ""; 
 for(var i =0;i<provinces.length;i++){ 
 <span style="white-space:pre"> </span>res += "<option>"+provinces[i].place+"</option>"; 
 } 
  $("#province").append(res); 
 });

这样就能在页面加载的时候获取到数据

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

然后我们再来做联动，首先给下拉框添加一个change事件，然后获取选中的信息，将选中的信息发送到另一个cityservlet中

//下拉框改变时触发的事件 
 $("#province").change(function(){ 
 var seled = $("option:selected").html(); 
      
 $("span").html(seled); 
 $.getjson("cityservlet",{ 
  "province":encodeuri(encodeuri(seled)) 
     },function(data){ 
  $("#city").html(""); 
  var citys = data; 
  var res = ""; 
  for(var i = 0;i<citys.length;i++){ 
   res += "<option>"+citys[i].place+"</option>"; 
  } 
  $("#city").append(res); 
 }); 
      
 });

服务器通过获得的信息通过sql语句查询出来，sql代码如下：

public arraylist<city> findallcitybypro(string name) { 
  resultset rs = null; 
  arraylist<city> citys = null; 
  try { 
   //通过名字获得所有值 
   string sql = "select c.city_place from city c ," 
     + "province p where c.province_id = " 
     + " (select id from province where place = '"+ name +"') " 
     + " and c.province_id = p.id"; 
   conn = connectionfactory.getconnection(); 
   pstmt = conn.preparestatement(sql); 
   citys = new arraylist<city>(); 
   system.out.println(sql); 
   rs = pstmt.executequery(); 
    
   while(rs.next()){ 
    city city = new city(); 
    city.setplace(rs.getstring(1)); 
    citys.add(city); 
   } 
   system.out.println(citys); 
    
  } catch (sqlexception e) { 
   e.printstacktrace(); 
  } 
   
  return citys; 
 }

将查询到的数据发送到后台，后台接收到数据后将其转换为json对象，并通过回调函数发送到前台，然后前台就可以通过事件直接获取到数据，而不用各种跳转页面，这就是ajax(asynchronous javascript and xml),

protected void doget(httpservletrequest request, httpservletresponse response) 
   throws servletexception, ioexception { 
  response.setcontenttype("application/json;charset=utf-8"); 
  response.setcharacterencoding("utf-8"); 
  request.setcharacterencoding("utf-8"); 
//  string proname = "浙江"; 
  string proname = urldecoder.decode(urldecoder.decode(request.getparameter("province"), "utf-8"), 
    "utf-8"); 
  arraylist<city> citys= new place().findallcitybypro(proname); 
  printwriter out = response.getwriter(); 
  out.write(jsonarray.fromobject(citys).tostring()); 
   
 }

至于显示页面的代码也在前面写到jquery语句中了

效果如下：

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

以上这篇使用ajax和jquery配合数据库实现下拉框的二级联动的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇： Laravel5.2使用Captcha生成验证码实现登录（session巨坑）

下一篇：把程序集安装到全局程序集缓存中的步骤

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)