Ajax動(dòng)態(tài)為下拉列表添加數(shù)據(jù)的示例分析

這篇文章主要為大家展示了“Ajax動(dòng)態(tài)為下拉列表添加數(shù)據(jù)的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Ajax動(dòng)態(tài)為下拉列表添加數(shù)據(jù)的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供內(nèi)蒙古網(wǎng)站建設(shè)、內(nèi)蒙古做網(wǎng)站、內(nèi)蒙古網(wǎng)站設(shè)計(jì)、內(nèi)蒙古網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、內(nèi)蒙古企業(yè)網(wǎng)站模板建站服務(wù)，十載內(nèi)蒙古做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

1. 前臺(tái)jsp，新建一個(gè)下拉控件

<select id="seldvd" onChange="sel_onchange(this)"></select>

2. js部分，建一個(gè)function方法，利用ajax，指向 'getAllTypes.action' 的servlet部分，獲取傳來的下拉列表的數(shù)據(jù)，動(dòng)態(tài)填充

<span > </span>function loadType(){ 
<span >   </span>$.get( 
 <span >  </span>    'getAllTypes.action', 
<span >   </span>  function(data){ 
<span >   </span>   var $sel = $("#seldvd"); 
<span >     </span> // console.log(data); 
<span >   </span>   for(var i = 0;i<data.length;i++){ 
<span >     </span> <span >  </span>$item = $("<option></option>"); //添加option 
<span >     </span> <span >  </span>$item.val(data[i].id); //添加option的value ，<span ><span >數(shù)據(jù)庫(kù)中用id和type保存的數(shù)據(jù)</span></span> 
<span >     </span> <span >  </span>$item.html(data[i].type); //添加option數(shù)據(jù) 
<span >     </span> <span >  </span>$sel.append($item); //將option添加進(jìn)select 
 <span >  </span>     } 
 <span >  </span>    },'json' 
 <span >  </span>   ); 
<span > </span>}

3. 新建一個(gè)servlet頁(yè)面，用來向Ajax返回?cái)?shù)據(jù)

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);//這里導(dǎo)入需要轉(zhuǎn)json數(shù)據(jù)包 
    String jsString = arr.toString(); 
    //響應(yīng)到客戶端     
    request.setCharacterEncoding("utf-8"); 
    response.setContentType("text/plain;charset=utf-8"); 
    response.getWriter().print(jsString); //返回下拉列表需要的json格式數(shù)據(jù) 
  }

4. 那么問題來了，這個(gè)數(shù)據(jù)來源在哪??？當(dāng)然在數(shù)據(jù)庫(kù)（MySQL）。所以先要寫一個(gè)方法讀取數(shù)據(jù)庫(kù)中的數(shù)據(jù)

<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 (需要導(dǎo)入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("顯示所有類型報(bào)錯(cuò)："+e.getMessage()); 
    }finally{ 
      super.closeAll(rs, psm, con); 
    } 
    return typeList; 
  //  
  } 
}

4. 好了，利用Tomcat ，現(xiàn)在打開網(wǎng)頁(yè)，下拉列表就能顯示數(shù)據(jù)了

以上是“Ajax動(dòng)態(tài)為下拉列表添加數(shù)據(jù)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：Ajax動(dòng)態(tài)為下拉列表添加數(shù)據(jù)的示例分析
分享URL：http://bm7419.com/article10/jjehgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、Google、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站建設(shè)、、品牌網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容