Ajax动态为下拉列表添加数据的实现方法
2017-01-24 10:12
656 查看
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动态为下拉列表添加数据的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 数据库中数据添加到下拉列表的实现方法
- NET WinForm程序中给DataGridView表头添加下拉列表实现数据过滤【转载】
- jQuery实现在下拉列表选择时获取json数据的方法
- .NET WinForm程序中给DataGridView表头添加下拉列表实现数据过滤
- jQuery实现动态显示select下拉列表数据的方法
- AngularJS中ng-options实现下拉列表的数据绑定方法
- PHP实现动态添加XML中数据的方法
- jQuery实现表单动态添加数据并提交的方法
- Vue 实现列表动态添加和删除的两种方法小结
- asp.net 下拉列表无级数据绑定实现代码
- ios 实现在tableViewCell上面添加长按手势 删除该条cell以及列表后台数据等
- Ajax动态为下拉列表添加数据
- 下拉刷新上拉加载数据列表实现(Kotlin版)
- Android编程实现在Activity中操作刷新另外一个Activity数据列表的方法
- Java下拉列表联动的实现(从数据库读取数据)
- html怎样实现数据列表的下拉效果
- Popup弹出框添加数据实现方法
- jquery-ajax请求后台数据转换json显示在select下拉列表&&jquery获取下拉列表的值和显示内容的方法
- MVP模式实现网络请求数据并添加到列表(Rxjava+Retrofit)