主页 > 知识库 > Ajax动态为下拉列表添加数据的实现方法

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

热门标签:Linux服务器 银行业务 阿里云 Mysql连接数设置 团购网站 电子围栏 服务器配置 科大讯飞语音识别系统

 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;idata.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"); 
    ArrayListtypeInfo> typeList = new ArrayListtypeInfo>(); 
    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 ArrayListtypeInfo> getAllTypes(){ 
    ArrayListtypeInfo> typeList = new ArrayListtypeInfo>(); 
    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动态为下拉列表添加数据的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:
  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
  • ajax实现输入框文字改变展示下拉列表的效果示例
  • 利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤

标签:广元 衢州 蚌埠 衡水 大理 江苏 萍乡 枣庄

巨人网络通讯声明:本文标题《Ajax动态为下拉列表添加数据的实现方法》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266