Ajax动态为下拉列表添加数据的实现方法
1.前台jsp，新建一个下拉控件
<selectid="seldvd"onChange="sel_onchange(this)"></select>
2.js部分，建一个function方法，利用ajax，指向'getAllTypes.action'的servlet部分，获取传来的下拉列表的数据，动态填充
<spanstyle="white-space:pre"></span>functionloadType(){
<spanstyle="white-space:pre"></span>$.get(
<spanstyle="white-space:pre"></span>'getAllTypes.action',
<spanstyle="white-space:pre"></span>function(data){
<spanstyle="white-space:pre"></span>var$sel=$("#seldvd");
<spanstyle="white-space:pre"></span>//console.log(data);
<spanstyle="white-space:pre"></span>for(vari=0;i<data.length;i++){
<spanstyle="white-space:pre"></span><spanstyle="white-space:pre"></span>$item=$("<option></option>");//添加option
<spanstyle="white-space:pre"></span><spanstyle="white-space:pre"></span>$item.val(data[i].id);//添加option的value，<spanstyle="line-height:1.5;white-space:pre-wrap;font-family:Arial,Helvetica,sans-serif;"><spanstyle="font-size:10px;">数据库中用id和type保存的数据</span></span>
<spanstyle="white-space:pre"></span><spanstyle="white-space:pre"></span>$item.html(data[i].type);//添加option数据
<spanstyle="white-space:pre"></span><spanstyle="white-space:pre"></span>$sel.append($item);//将option添加进select
<spanstyle="white-space:pre"></span>}
<spanstyle="white-space:pre"></span>},'json'
<spanstyle="white-space:pre"></span>);
<spanstyle="white-space:pre"></span>}
3.新建一个servlet页面，用来向Ajax返回数据
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
request.setCharacterEncoding("utf-8");
ArrayList<typeInfo>typeList=newArrayList<typeInfo>();
typeDaotd=newtypeDao();
typeList=td.getAllTypes();
JSONArrayarr=newJSONArray(typeList);//这里导入需要转json数据包
StringjsString=arr.toString();
//响应到客户端
request.setCharacterEncoding("utf-8");
response.setContentType("text/plain;charset=utf-8");
response.getWriter().print(jsString);//返回下拉列表需要的json格式数据
}
4.那么问题来了，这个数据来源在哪啊？当然在数据库（MySQL）。所以先要写一个方法读取数据库中的数据
<strong>typeInfo.java</strong>
importjava.io.Serializable;
publicclasstypeInfoimplementsSerializable{
privateintid;
privateStringtype;
publicintgetId(){
returnid;
}
publicvoidsetId(intid){
this.id=id;
}
publicStringgetType(){
returntype;
}
publicvoidsetType(Stringtype){
this.type=type;
}
publictypeInfo(){
}
publictypeInfo(intid,Stringtype){
this.id=id;
this.type=type;
}
}
TypeDao.java (需要导入JDBC包)
importjava.sql.Connection;
importjava.sql.PreparedStatement;
importjava.sql.ResultSet;
importjava.util.ArrayList;
importmodel.typeInfo;
publicclasstypeDaoextendsbaseDao{
publicArrayList<typeInfo>getAllTypes(){
ArrayList<typeInfo>typeList=newArrayList<typeInfo>();
Connectioncon=null;
PreparedStatementpsm=null;
ResultSetrs=null;
try{
con=super.getConnection();
psm=con.prepareStatement("select*fromtypes");
rs=psm.executeQuery();
while(rs.next()){
typeInfotypes=newtypeInfo();
types.setId(rs.getInt(1));
types.setType(rs.getString(2));
typeList.add(types);
}
}catch(Exceptione){
System.out.println("显示所有类型报错："+e.getMessage());
}finally{
super.closeAll(rs,psm,con);
}
returntypeList;
//
}
}
4.好了，利用Tomcat，现在打开网页，下拉列表就能显示数据了
以上所述是小编给大家介绍的Ajax动态为下拉列表添加数据的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！