全国咨询热线:18720358503

企业名片微信小程序_使用Ajax和Jquery合作数据库完

类别:媒体报道 发布时间:2021-01-08 浏览人次:

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例       下面小编就为大家分享一篇使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如图:

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

再然后,我们就能开始做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 凡科抠图tmt 
 * @param stmt 
 * @param rs 
 public static void close(Connection conn,PreparedStatement 凡科抠图tmt,Statement stmt,ResultSet rs){ 
 try { 
 if (conn != null) { 
 conn.close(); 
 if (凡科抠图tmt != null) { 
 凡科抠图tmt.close(); 
 if (stmt != null) { 
 stmt.close(); 
 if (rs != null) { 
 rs.close(); 
 } catch (SQLException e) { 
 throw new RuntimeException(e); 

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

Connection conn = null; 
 PreparedStatement 凡科抠图tmt = 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(); 
 凡科抠图tmt = conn.prepareStatement(sql); 
 pros = new ArrayList Province 
 rs = 凡科抠图tmt.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对象,我们需要导入以下几个包

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

 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 /span res += " option "+provinces[i].place+" /option 
 $("#province").append(res); 
 }); 

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

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

//下拉框改变时触发的事件 
 $("#province").change(function(){ 
 (); 
 $("(seled); 
 $.getJSON("CityServlet",{ 
 "province":encodeURI(encodeURI(seled)) 
 },function(data){ 
 $("#(""); 
 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(); 
 凡科抠图tmt = conn.prepareStatement(sql); 
 citys = new ArrayList City 
 System.out.println(sql); 
 rs = 凡科抠图tmt.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配合数据库实现下拉框的二级联动的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


推荐阅读

聊城市网站建设难-酒店型的网站该如何做?酒店

新建设酒店餐厅网站时大家要充足考虑到“酒店餐厅”的运营服务特点 因而大家在制作计划方案时候重视系统软件的好用性 靠谱性 优秀性和经济发展性标准 此外还会继续留意系统软件...

2021-01-15
网站建站公司-规范而标准的流程是保证企业网站

创建一个网站并不是一件简易的事儿。尽管一些企业如今投放广告说她们只花好几百元就可以建一个网站,可是在它的身后有许多掩藏的难题。数100元的网站并不是自身设计方案的,但...

2021-01-15
企业商城建站套餐-一个阿里云域名站应当如何建

制作一个网站是非常容易的,而想要运营好一个网站就非常难。建站行业发展迅速,近几年出现了很多建站公司,而成功发展下来的又有多少呢?在一开始都是模仿,然后不断创新,慢...

2021-01-14
网页模板图片-万象云模板自助建站系统系统201

微信小程序1.增加查寻作用应用情景:公司会出现一些和本身业务流程有关的数据信息,必须给到顾客出示“查寻信息内容”或“查寻交费”服务。1)查寻信息内容:院校、学习培训组...

2021-01-14
广州凡科互联网科技股份有限公司招聘电商网络

招聘人数:23职位信息如果你拥有强大的企图心和追求理想的韧性来吧,这里,给你的不仅是一份养家糊口的工作,而是一份事业!这里,你不仅仅是一个普通的销售,而是一个想要成功...

2021-01-13
广州凡科互联网科技股份有限公司招聘财务出纳

招聘人数:7职位信息岗位职责:1、日常现金、银行、票据的收、支结算;2、登记现金、银行日记账,对各类票据做好备查登记;3、每日核对现金、银行余额,编制资金日报表;4、对各...

2021-01-13
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信