Liste déroulante Ajax ajouter des données

Cette fois, je vous propose Ajaxliste déroulante pour ajouter des données Quelles sont les précautions pour ajouter des données à la liste déroulante Ajax Voici des cas pratiques, prenons-en ? un regard.

1. Dans le jsp front-end, créez un nouveau contrôle déroulant

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

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

<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 Créez une nouvelle page de servlet 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. Alors la question est : la source de ces données est Où ? 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; 
  //  
  } 
}

Je crois que vous l'avez maîtrisé après avoir lu le cas dans cet article. Pour des méthodes plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser Ajax pour implémenter les fonctions d'enregistrement et de téléchargement d'avatar

Comment implémenter la fonction de commentaire ajax sans actualiser

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!