Ajax下拉清單新增數據
這次為大家帶來Ajax下拉列表添加數據,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; // } }
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Ajax下拉清單新增數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

DDREASE是一種用於從檔案或區塊裝置(如硬碟、SSD、RAM磁碟、CD、DVD和USB儲存裝置)復原資料的工具。它將資料從一個區塊設備複製到另一個區塊設備,留下損壞的資料區塊,只移動好的資料區塊。 ddreasue是一種強大的恢復工具,完全自動化,因為它在恢復操作期間不需要任何干擾。此外,由於有了ddasue地圖文件,它可以隨時停止和恢復。 DDREASE的其他主要功能如下:它不會覆寫恢復的數據,但會在迭代恢復的情況下填補空白。但是,如果指示工具明確執行此操作,則可以將其截斷。將資料從多個檔案或區塊還原到單

0.這篇文章乾了啥?提出了DepthFM:一個多功能且快速的最先進的生成式單目深度估計模型。除了傳統的深度估計任務外,DepthFM還展示了在深度修復等下游任務中的最先進能力。 DepthFM效率高,可以在少數推理步驟內合成深度圖。以下一起來閱讀這項工作~1.論文資訊標題:DepthFM:FastMonocularDepthEstimationwithFlowMatching作者:MingGui,JohannesS.Fischer,UlrichPrestel,PingchuanMa,Dmytr

谷歌力推的JAX在最近的基準測試中表現已經超過Pytorch和TensorFlow,7項指標排名第一。而且測試並不是JAX性能表現最好的TPU上完成的。雖然現在在開發者中,Pytorch依然比Tensorflow更受歡迎。但未來,也許有更多的大型模型會基於JAX平台進行訓練和運行。模型最近,Keras團隊為三個後端(TensorFlow、JAX、PyTorch)與原生PyTorch實作以及搭配TensorFlow的Keras2進行了基準測試。首先,他們為生成式和非生成式人工智慧任務選擇了一組主流

在iPhone上面臨滯後,緩慢的行動數據連線?通常,手機上蜂窩互聯網的強度取決於幾個因素,例如區域、蜂窩網絡類型、漫遊類型等。您可以採取一些措施來獲得更快、更可靠的蜂窩網路連線。修復1–強制重啟iPhone有時,強制重啟設備只會重置許多內容,包括蜂窩網路連線。步驟1–只需按一次音量調高鍵並放開即可。接下來,按降低音量鍵並再次釋放它。步驟2–過程的下一部分是按住右側的按鈕。讓iPhone完成重啟。啟用蜂窩數據並檢查網路速度。再次檢查修復2–更改資料模式雖然5G提供了更好的網路速度,但在訊號較弱

許多用戶在現代生活中越來越青睞小米智慧家庭互聯的電子生態,那麼連接米家APP後,你就可以輕鬆用手機來控制連接設備,但是很多用戶們還不知如何將自己的家居添加米家app中,那麼這篇教學攻略將為大家帶來具體連接方法步驟攻略,希望能幫助到各位有需要的小夥伴們。 1.下載米家APP後,建立或登入小米帳號。 2.添加方法:當全新的設備通電後,將手機靠近設備並打開小米電視,正常情況下會彈出連接提示,選擇“確定”即進入設備連接流程。若無提示彈出,也可以手動新增設備,方法是:進入智慧型家庭APP後,點選左下方第1

特斯拉機器人Optimus最新影片出爐,已經可以在工廠裡打工了。正常速度下,它分揀電池(特斯拉的4680電池)是這樣的:官方還放出了20倍速下的樣子——在小小的「工位」上,揀啊揀啊揀:這次放出的影片亮點之一在於Optimus在廠子裡完成這項工作,是完全自主的,全程沒有人為的干預。而且在Optimus的視角之下,它還可以把放歪了的電池重新撿起來放置,主打一個自動糾錯:對於Optimus的手,英偉達科學家JimFan給出了高度的評價:Optimus的手是全球五指機器人裡最靈巧的之一。它的手不僅有觸覺

哭死啊,全球狂煉大模型,一網路的資料不夠用,根本不夠用。訓練模型搞得跟《飢餓遊戲》似的,全球AI研究者,都在苦惱怎麼才能餵飽這群資料大胃王。尤其在多模態任務中,這問題尤其突出。一籌莫展之際,來自人大系的初創團隊,用自家的新模型,率先在國內把「模型生成數據自己餵自己」變成了現實。而且還是理解側和生成側雙管齊下,兩側都能產生高品質、多模態的新數據,對模型本身進行數據反哺。模型是啥?中關村論壇上剛露面的多模態大模型Awaker1.0。團隊是誰?智子引擎。由人大高瓴人工智慧學院博士生高一鑷創立,高

多模態文件理解能力新SOTA!阿里mPLUG團隊發布最新開源工作mPLUG-DocOwl1.5,針對高解析度圖片文字辨識、通用文件結構理解、指令遵循、外部知識引入四大挑戰,提出了一系列解決方案。話不多說,先來看效果。複雜結構的圖表一鍵識別轉換為Markdown格式:不同樣式的圖表都可以:更細節的文字識別和定位也能輕鬆搞定:還能對文檔理解給出詳細解釋:要知道,“文檔理解”目前是大語言模型實現落地的一個重要場景,市面上有許多輔助文檔閱讀的產品,有的主要透過OCR系統進行文字識別,配合LLM進行文字理
