手机版

使用埃阿斯和框架配合数据库实现下拉框的二级联动的示例

时间:2021-09-01 来源:互联网 编辑:宝哥软件园 浏览:

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

需要两张表:

省:省份表

城市:城市表

如图:

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

再然后,我们就能开始做数据库编程的操作了

公共类ConnectionFactory {私有静态线驱动程序;私有静态字符串全球资源定位器(Uniform Resource Locator)私有静态字符串用户;私有静态字符串密码;静态{属性道具=新属性();//读取文件请尝试{ InputStream in=connection factory。上课。getresourceasstream(' ./JDBC。属性’);道具装载量;司机=道具。GetProperty(' JDBC。驱动程序');网址=道具。GetProperty(' JDBC。URL ');用户=道具。GetProperty(' JDBC。用户');密码=道具。GetProperty(' JDBC。密码');} catch(IOexception e){ e . print stack trace();} } /** * 获取连接对象* @ return */public static Connection getConnection(){ Connection conn=null;请尝试{ Class.forName(驱动程序);conn=Drivermanager。获取连接(网址、用户、密码);}捕获(例外e){ 0抛出新的RuntimeException(e);}返回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语句如下

连接conn=NullPreparedStatement pstmt=null省省=空;@ Override public ArrayList vusion find all pro(){ ResultSet RS=null;ArrayList pros=null尝试{字符串sql='从省中选择身份证、地点;conn=connectionfactory。getconnection();pstmt=conn . prepare statement(SQL);pros=new ArrayListProvince();RS=pstmt。execute query();while(RS . next()){ 0省省=新省();省份。setid(RS。getint(1));省份。设定地点(遥感。getString(2));pros.add(省);} } catch(SQLException e){ throw new RuntimeException(e);}返回专业人员;} 将查到的数据放到后台,建立一个选择的服务器类,用于接收查询到的所有省份的信息

回应。SetContentType(' application/JSON;charset=utf-8 ');回应。setcharacter encoding(' utf-8 ');请求。setcharacter encoding(' utf-8 ');//创建一个地方对象数组列表省优点=新位置()。findAllPro();PrintWriter out=响应。getwriter();//将集合直接转换为数据对象出去。write(JSonarray。FromObject(pros)).toString());在这里会用到集合转换数据对象,我们需要导入以下几个包

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

身体省份:select id='省份'选项-请选择省份-/选项/选择城市:select id='city '选项-请选择城市-/option/select br/br/span/span/body然后框架代码如下:(由于我导入的框架版本比较低,所以使用的方法是getJSON,而不是getJson)

$.getJSON('SelectedServlet ',函数(数据,textStatus){ var省份=数据;var RES=for(var I=0;ipro vinces . lengthi){ span style=' white-space : pre '/span RES=' option '省份[i].place '/option ';} $(' #省份')。追加(RES);});这样就能在页面加载的时候获取到数据

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

//下拉框改变时触发的事件$(' #省份')。change(function(){ var seled=$(' option : selected ').html();$(“跨度”).html(seled);$.getJSON('CityServlet ',{ '省份: encodeURI(encodeURI(seled))}),函数(数据){ $('#city ').html(" ");var citys=数据;var RES=for(var I=0;icitys . lengthi){ RES=' option ' city[I].place '/option ';} $('#city ').追加(RES);});});服务器通过获得的信息通过结构化查询语言语句查询出来,SQL代码如下:

public ArrayList city find all city by pro(字符串名称){ ResultSet RS=NullArraylistcity city s=null尝试{ //通过名字获得所有值字符串sql='从城市c中选择' c.city_place ','省p,其中c . vehicle _ id=' '(从地点=“名称”的省中选择id)和c . vehicle _ id=p . id ';conn=connectionfactory。getconnection();pstmt=conn . prepare statement(SQL);city s=new ArrayList city();系统。出去。println(SQL);RS=pstmt。execute query();而(RS。next()){ City City=new City();城市。设置地点(RS。getString(1));citys.add(城市);}系统。出去。println(s市);} catch(SQLException e){ e . printstacktrace();}返回城市;} 将查询到的数据发送到后台,后台接收到数据后将其转换为数据对象,并通过回调函数发送到前台,然后前台就可以通过事件直接获取到数据,而不用各种跳转页面,这就是异步java描述语言和XML,

受保护的void doGet(HttpServletRequest请求,HttpServletResponse响应)引发ServletException,IOException { response。setcontenttype(' application/JSON;charset=utf-8 ');回应。setcharacter encoding(' utf-8 ');请求。setcharacter encoding(' utf-8 ');//String proName='浙江;string ProName=urlDecoder。解码(urlDecoder。解码(请求。GetParameter('省份)、' utf-8 ')、' utf-8 ');ArrayListCity citys=new Place().pro(ProName)的findalcityPrintWriter out=响应。getwriter();出去。write(JSonarray。FromObject(城市).toString());} 至于显示页面的代码也在前面写到框架语句中了

效果如下:

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

版权声明:使用埃阿斯和框架配合数据库实现下拉框的二级联动的示例是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。