Maison > interface Web > js tutoriel > Méthode Ajax pour ajouter dynamiquement des données à la liste déroulante

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

亚连
Libérer: 2018-05-23 09:41:24
original
1892 Les gens l'ont consulté

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>
Copier après la connexion
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>}
Copier après la connexion
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格式数据 
  }
Copier après la connexion
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>
Copier après la connexion
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; 
  } 
}
Copier après la connexion
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; 
  //  
  } 
}
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal