Ajax method to dynamically add data to drop-down list-JS Tutorial-php.cn

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.

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!