Ajax动态为下拉列表添加数据的实现方法
程序员文章站
2022-03-31 14:09:38
1. 前台jsp,新建一个下拉控件
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动态为下拉列表添加数据的实现方法,希望对大家有所帮助