Ajax dynamically add data to dropdown list
This article mainly introduces the implementation method of Ajax dynamically adding data to the drop-down list. Friends who need it can refer to it. I hope it can help everyone.
1. In the front-end jsp, create a new drop-down control
<select id="seldvd" onChange="sel_onchange(this)"></select>
2. In the js part, create a function method, use ajax, point to 'getAllTypes.action' The servlet part, obtains the data from the drop-down list and dynamically fills in
<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. Create a new servlet page to return data to 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. So the question is, where is the source of this data? In the database (MySQL) of course. So first we need to write a method to read the data in the database
<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 (need to import the JDBC package)
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. Okay, using Tomcat, now open the web page and the drop-down list will display the data
Related recommendations:
jQuery EasyUI Detailed explanation of adding data instances
ASP.NET adds data instances to the database
php lazy function automatically adds data
The above is the detailed content of Ajax dynamically add data to dropdown list. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1673
14
1429
52
1333
25
1278
29
1257
24
PHP and Ajax: Building an autocomplete suggestion engine
Jun 02, 2024 pm 08:39 PM
Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.
How to add a TV to Mijia
Mar 25, 2024 pm 05:00 PM
Many users are increasingly favoring the electronic ecosystem of Xiaomi smart home interconnection in modern life. After connecting to the Mijia APP, you can easily control the connected devices with your mobile phone. However, many users still don’t know how to add Mijia to their homes. app, then this tutorial guide will bring you the specific connection methods and steps, hoping to help everyone in need. 1. After downloading Mijia APP, create or log in to Xiaomi account. 2. Adding method: After the new device is powered on, bring the phone close to the device and turn on the Xiaomi TV. Under normal circumstances, a connection prompt will pop up. Select "OK" to enter the device connection process. If no prompt pops up, you can also add the device manually. The method is: after entering the smart home APP, click the 1st button on the lower left
How to solve the 403 error encountered by jQuery AJAX request
Feb 20, 2024 am 10:07 AM
Title: Methods and code examples to resolve 403 errors in jQuery AJAX requests. The 403 error refers to a request that the server prohibits access to a resource. This error usually occurs because the request lacks permissions or is rejected by the server. When making jQueryAJAX requests, you sometimes encounter this situation. This article will introduce how to solve this problem and provide code examples. Solution: Check permissions: First ensure that the requested URL address is correct and verify that you have sufficient permissions to access the resource.
How to solve jQuery AJAX request 403 error
Feb 19, 2024 pm 05:55 PM
jQuery is a popular JavaScript library used to simplify client-side development. AJAX is a technology that sends asynchronous requests and interacts with the server without reloading the entire web page. However, when using jQuery to make AJAX requests, you sometimes encounter 403 errors. 403 errors are usually server-denied access errors, possibly due to security policy or permission issues. In this article, we will discuss how to resolve jQueryAJAX request encountering 403 error
How to connect to Polygon network in MetaMask wallet? Tutorial guide for connecting MetaMask wallet to Polygon network
Jan 19, 2024 pm 04:36 PM
How to add a PolygonMainnet network To use MATIC (Polygon) with Metamask, you need to add a private network called "PolygonMainnet". Transferring in with the wrong network address can cause problems, so be sure to use the "PolygonMainnet" network before transferring out of $MATIC. The Metamask wallet is connected to the Ethereum mainnet by default, but we can simply add "PolygonMainnet" and use $MATIC. Just a few simple copy and paste steps and you're done. First, in the Metamask wallet, click on the network option in the upper right corner and select "C
How to add a new script in Tampermonkey-How to delete a script in Tampermonkey
Mar 18, 2024 pm 12:10 PM
Tampermonkey Chrome extension is a user script management plug-in that improves user efficiency and browsing experience through scripts. So how does Tampermonkey add new scripts? How to delete the script? Let the editor give you the answer below! How to add a new script to Tampermonkey: 1. Take GreasyFork as an example. Open the GreasyFork web page and enter the script you want to follow. The editor here chooses one-click offline download. 2. Select a script. , after entering the script page, you can see the button to install this script. 3. Click to install this script to come to the installation interface. Just click here to install. 4. We can see the installed one-click in the installation script.
How to solve the problem of jQuery AJAX error 403?
Feb 23, 2024 pm 04:27 PM
How to solve the problem of jQueryAJAX error 403? When developing web applications, jQuery is often used to send asynchronous requests. However, sometimes you may encounter error code 403 when using jQueryAJAX, indicating that access is forbidden by the server. This is usually caused by server-side security settings, but there are ways to work around it. This article will introduce how to solve the problem of jQueryAJAX error 403 and provide specific code examples. 1. to make
![Outlook stuck on adding account [Fixed]](https://img.php.cn/upload/article/000/887/227/171116770937641.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Outlook stuck on adding account [Fixed]
Mar 23, 2024 pm 12:21 PM
When you encounter problems adding accounts in Outlook, you can try the following solutions to resolve it. Typically this can be caused by a faulty network connection, corrupted user profiles, or other temporary issues. Through the methods provided in this article, you can easily solve these problems and ensure that your Outlook can run normally. Outlook stuck on adding account If your Outlook is stuck on adding account, then use these fixes mentioned below: Disconnect and reconnect the internet Temporarily disable antivirus software Create a new Outlook profile Try adding account in safe mode Disable IPv6 Run Microsoft Support and Recovery Assistant Repair Office Application Outlook Add Account Required
