用户登录
用户注册

分享至

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

  • 作者: 浮生半日闲人
  • 来源: 51数据库
  • 2021-09-21

 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动态为下拉列表添加数据的实现方法,希望对大家有所帮助

软件
前端设计
程序设计
Java相关