本文主要介紹了Ajax動態為下拉清單添加資料的實作方法,需要的朋友可以參考下，希望能幫助大家。
1. 前台jsp，新建一個下拉控制項
<select id="seldvd" onChange="sel_onchange(this)"></select>
登入後複製
2. js部分，建立一個function方法，利用ajax，指向'getAllTypes.action'的servlet部分，取得傳來的下拉清單的數據，動態填入
<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. 新建一個servlet頁面，用來向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. 那麼問題來了，這個資料來源在哪啊？當然在資料庫（MySQL）。所以先寫一個方法讀取資料庫中的資料
<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 (需要導入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 ，現在開啟網頁，下拉清單就能顯示資料了
相關推薦：
jQuery EasyUI 新增資料實例詳解
ASP.NET為資料庫新增資料實例
php懶人函數自動新增資料
以上是Ajax動態為下拉清單新增數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！
