Ajax method to dynamically add data to drop-down list

亚连
Release: 2018-05-23 09:41:24
Original
1738 people have browsed it

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

1. Front-end jsp, create a new drop-down control

Copy after login

2. In the js part, build a function method, use ajax, point to the servlet part of 'getAllTypes.action', get the data of the drop-down list, and dynamically fill in

 function loadType(){  $.get(   'getAllTypes.action',   function(data){   var $sel = $("#seldvd");   // console.log(data);   for(var i = 0;i   $item = $(""); //添加option    $item.val(data[i].id); //添加option的value ,数据库中用id和type保存的数据    $item.html(data[i].type); //添加option数据    $sel.append($item); //将option添加进select   }   },'json'   );  }
Copy after login

3. Create a new servlet page to send Ajax Return data

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); ArrayList typeList = new ArrayList(); 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格式数据 }
Copy after login

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

typeInfo.java
Copy after login
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; } }
Copy after login

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 getAllTypes(){ ArrayList typeList = new ArrayList(); 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; // } }
Copy after login

4. Okay, using Tomcat, now open the web page and the drop-down list will be The data can be displayed

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Set Access-Control-Allow-Origin to achieve cross-domain access

Ajax realizes registration and selects the avatar and uploads it Function

Details the differences between async:false and async:true in Ajax requests

The above is the detailed content of Ajax method to dynamically add data to drop-down list. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!