Ajax动态为下拉列表添加数据的实现方法

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动态为下拉列表添加数据的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！