Méthode Ajax pour ajouter dynamiquement des données à la liste déroulante

Cet article présente principalement la méthode d'implémentation d'Ajax qui ajoute dynamiquement des données à la liste déroulante. Les amis qui en ont besoin peuvent s'y référer

1. Jsp de premier plan, créez un nouveau contrôle déroulant

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

2. Dans la partie js, construisez une méthode fonction, utilisez ajax, pointez sur la partie servlet de 'getAllTypes.action', récupérez les données de la liste déroulante et remplissez dynamiquement

<span style="white-space:pre"> </span>function loadType(){ 
<span style="white-space:pre">   </span>$.get( 
 <span style="white-space:pre">  </span>    &#39;getAllTypes.action&#39;, 
<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>    },&#39;json&#39; 
 <span style="white-space:pre">  </span>   ); 
<span style="white-space:pre"> </span>}

3. Créer une nouvelle page de servlet, utilisée pour renvoyer les données à 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 La question est donc : où est la source de ces données ? Dans la base de données (MySQL) bien sûr. Alors écrivez d'abord une méthode pour lire les données dans la base de données

<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 (besoin d'importer le package 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; 
  //  
  } 
}

D'accord, en utilisant Tomcat. , Ouvrez maintenant la page Web et les données seront affichées dans la liste déroulante

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Définissez Access-Control-Allow-Origin pour obtenir un accès inter-domaines

Ajax pour vous inscrire et sélectionner un avatar et télécharger la fonction

Détaille les différences entre async:false et async:true dans les requêtes Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!