Ajax动态为下拉列表添加数据的实现方法
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 ,现在打开网页,下拉列表就能显示数据了
原文链接:http://blog.csdn.net/chauncywu/article/details/54670716
(资源库 www.zyku.net)
您可能感兴趣的文章
- 03-31利用ajax+php实现商品价格计算
- 03-30thinkphp5 使用H-ui+ajax 提交数据
- 07-27PHP自定义函数判断是否为Get、Post及Ajax提交的方法
- 07-18使用Ajax方法实现Form表单的提交及注意事项
- 07-18Ajax的特性及乱码问题
- 07-12jQuery+Ajax请求本地数据加载商品列表页并跳转详情页
- 06-26Ajax提交表单并接收json实例代码
- 04-05Ajax验证用户名或昵称是否已被注册
- 03-15thinkPHP+ajax实现统计页面pv浏览量的方法
- 02-18ThinkPHP中ajax使用实例教程
- 09-08VuePress一个全新的基于vue的静态网站
- 03-01小米11ultra全面屏开启方法
- 11-21红米note10关闭自动升级系统步骤分享
- 01-12喵杰顺店员-喵杰顺店员应用软件功能介
- 07-05Linux rmdir命令
- 12-19HTML <li> 标签
- 09-20oppo手机如何限制应用使用时间
- 09-19oppo手机如何控制应用使用时间
- 03-20魅族18pro锁屏时间修改方法
- 01-11赣游通-赣游通应用软件功能介绍
最近更新
阅读排行
猜你喜欢
- 02-10手把手教你怎么用Python实现zip文件密
- 01-12心动日记-心动日记应用软件功能介绍
- 07-05Linux arpwatch命令
- 12-24vivo手机怎么切换桌面主题
- 11-17hryfine手环连接手机教程介绍
- 11-11ipad青少年模式在哪开启
- 01-12喵杰顺店员-喵杰顺店员应用软件功能介
- 11-30华为手机备忘录怎么找
- 01-28华为手环b6跑步功能使用教程
- 10-11airPods pro对话增强设置步骤分享