Ajax动态为下拉列表添加数据的示例分析

这篇文章主要为大家展示了“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动态为下拉列表添加数据的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！