无为清净楼资源网 Design By www.qnjia.com
1. 前台jsp,新建一个下拉控件
<select id="seldvd" onChange="sel_onchange(this)"></select>
2. js部分,建一个function方法,利用ajax,指向 'getAllTypes.action' 的servlet部分,获取传来的下拉列表的数据,动态填充
<span style="white-space:pre"> </span>function loadType(){ <span style="white-space:pre"> </span>$.get( <span style="white-space:pre"> </span> 'getAllTypes.action', <span style="white-space:pre"> </span> function(data){ <span style="white-space:pre"> </span> var $sel = $("#seldvd"); <span style="white-space:pre"> </span> // console.log(data); <span style="white-space:pre"> </span> for(var i = 0;i<data.length;i++){ <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>$item = $("<option></option>"); //添加option <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>$item.val(data[i].id); //添加option的value ,<span style="line-height: 1.5; white-space: pre-wrap; font-family: Arial, Helvetica, sans-serif;"><span style="font-size:10px;">数据库中用id和type保存的数据</span></span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>$item.html(data[i].type); //添加option数据 <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>$sel.append($item); //将option添加进select <span style="white-space:pre"> </span> } <span style="white-space:pre"> </span> },'json' <span style="white-space:pre"> </span> ); <span style="white-space:pre"> </span>}
3. 新建一个servlet页面,用来向Ajax返回数据
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); ArrayList<typeInfo> typeList = new ArrayList<typeInfo>(); typeDao td = new typeDao(); typeList = td.getAllTypes(); JSONArray arr = new JSONArray(typeList);//这里导入需要转json数据包 String jsString = arr.toString(); //响应到客户端 request.setCharacterEncoding("utf-8"); response.setContentType("text/plain;charset=utf-8"); response.getWriter().print(jsString); //返回下拉列表需要的json格式数据 }
4. 那么问题来了,这个数据来源在哪啊?当然在数据库(MySQL)。所以先要写一个方法读取数据库中的数据
<strong>typeInfo.java</strong>
import java.io.Serializable; public class typeInfo implements Serializable { private int id; private String type; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getType() { return type; } public void setType(String type) { this.type = type; } public typeInfo(){ } public typeInfo(int id, String type) { this.id = id; this.type = type; } }
TypeDao.java (需要导入JDBC包)
import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.util.ArrayList; import model.typeInfo; public class typeDao extends baseDao { public ArrayList<typeInfo> getAllTypes(){ ArrayList<typeInfo> typeList = new ArrayList<typeInfo>(); Connection con = null; PreparedStatement psm = null; ResultSet rs = null; try { con = super.getConnection(); psm = con.prepareStatement("select * from types"); rs = psm.executeQuery(); while(rs.next()){ typeInfo types = new typeInfo(); types.setId(rs.getInt(1)); types.setType(rs.getString(2)); typeList.add(types); } } catch (Exception e) { System.out.println("显示所有类型报错:"+e.getMessage()); }finally{ super.closeAll(rs, psm, con); } return typeList; // } }
4. 好了,利用Tomcat ,现在打开网页,下拉列表就能显示数据了
以上所述是小编给大家介绍的Ajax动态为下拉列表添加数据的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
ajax下拉列表添加数据
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]