这篇文章主要为大家展示了“Ajax动态为下拉列表添加数据的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Ajax动态为下拉列表添加数据的示例分析”这篇文章吧。
创新互联专业为企业提供内蒙古网站建设、内蒙古做网站、内蒙古网站设计、内蒙古网站制作等企业网站建设、网页设计与制作、内蒙古企业网站模板建站服务，十载内蒙古做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
1. 前台jsp，新建一个下拉控件
2. js部分，建一个function方法，利用ajax，指向 'getAllTypes.action' 的servlet部分，获取传来的下拉列表的数据，动态填充
function loadType(){
$.get(
'getAllTypes.action',
function(data){
var $sel = $("#seldvd");
// console.log(data);
for(var i = 0;i $item = $(""); //添加option
$item.val(data[i].id); //添加option的value ，数据库中用id和type保存的数据
$item.html(data[i].type); //添加option数据
$sel.append($item); //将option添加进select
}
},'json'
);
}
3. 新建一个servlet页面，用来向Ajax返回数据
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
ArrayList typeList = new ArrayList();
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）。所以先要写一个方法读取数据库中的数据
typeInfo.java
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 getAllTypes(){
ArrayList typeList = new ArrayList();
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动态为下拉列表添加数据的示例分析
网页链接：
http://bjjierui.cn/article/jjehgo.html
