怎么样使用Ajax动态为下拉列表添加数据?

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