这次给大家带来Ajax下拉列表添加数据，Ajax下拉列表添加数据的注意事项有哪些，下面就是实战案例，一起来看一下。
1. 前台jsp，新建一个下拉控件
登录后复制
2. js部分，建一个function方法，利用ajax，指向 ‘getAllTypes.action’ 的servlet部分，获取传来的下拉列表的数据，动态填充
function loadType(){ $.get( 'getAllTypes.action', function(data){ var $sel = $("#seldvd"); // console.log(data); for(var i = 0;i<data.length;i++){ $item = $(""); //添加option $item.val(data[i].id); //添加option的value ，数据库中用id和type保存的数据 $item.html(data[i].type); //添加option数据 $sel.append($item); //将option添加进select } },'json' ); }
登录后复制
3. 新建一个servlet页面，用来向Ajax返回数据
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格式数据 }
登录后复制
4. 那么问题来了，这个数据来源在哪啊？当然在数据库（MySQL）。所以先要写一个方法读取数据库中的数据
typeInfo.java
登录后复制
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 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; // } }
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
用Ajax实现注册与头像上传功能
ajax如何实现不刷新的评论功能
以上就是Ajax下拉列表添加数据的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2776114.html
