您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Ajax動態(tài)為下拉列表添加數(shù)據(jù)的示例分析”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Ajax動態(tài)為下拉列表添加數(shù)據(jù)的示例分析”這篇文章吧。
1. 前臺jsp,新建一個下拉控件
<select id="seldvd" onChange="sel_onchange(this)"></select>
2. js部分,建一個function方法,利用ajax,指向 'getAllTypes.action' 的servlet部分,獲取傳來的下拉列表的數(shù)據(jù),動態(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ù)庫中用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添加進select <span > </span> } <span > </span> },'json' <span > </span> ); <span > </span>}
3. 新建一個servlet頁面,用來向Ajax返回數(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. 那么問題來了,這個數(shù)據(jù)來源在哪?。慨?dāng)然在數(shù)據(jù)庫(MySQL)。所以先要寫一個方法讀取數(shù)據(jù)庫中的數(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("顯示所有類型報錯:"+e.getMessage()); }finally{ super.closeAll(rs, psm, con); } return typeList; // } }
4. 好了,利用Tomcat ,現(xiàn)在打開網(wǎng)頁,下拉列表就能顯示數(shù)據(jù)了
以上是“Ajax動態(tài)為下拉列表添加數(shù)據(jù)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。