Ajax动态为下拉列表添加数据的实现方法_AJAX_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • AJAX

    当前位置:主页 > 网络编程 > AJAX >

    Ajax动态为下拉列表添加数据的实现方法

    时间:2019-07-22|栏目:AJAX|点击:
  • 1. 前台jsp,新建一个下拉控件

    <select onChange="sel_onchange(this)"></select>

    2. js部分,建一个function方法,利用ajax,指向 'getAllTypes.action' 的servlet部分,获取传来的下拉列表的数据,动态填充

    <span> </span>function loadType(){ <span> </span>$.get( <span> </span> 'getAllTypes.action', <span> </span> function(data){ <span> </span> var $sel = $("#seldvd"); <span> </span> // console.log(data); <span> </span> for(var i = 0;i<data.length;i++){ <span> </span> <span> </span>$item = $("<option></option>"); //添加option <span> </span> <span> </span>$item.val(data[i].id); //添加option的value ,<span><span>数据库中用id和type保存的数据</span></span> <span> </span> <span> </span>$item.html(data[i].type); //添加option数据 <span> </span> <span> </span>$sel.append($item); //将option添加进select <span> </span> } <span> </span> },'json' <span> </span> ); <span> </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; // } }

    4. 好了,利用Tomcat ,现在打开网页,下拉列表就能显示数据了

    以上所述是小编给大家介绍的Ajax动态为下拉列表添加数据的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

    上一篇:AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

    栏    目:AJAX

    下一篇:Ajax实现注册并选择头像后上传功能

    本文标题:Ajax动态为下拉列表添加数据的实现方法

    本文地址:http://www.jh-floor.com/wangluobiancheng/AJAX/8521.html

    您可能感兴趣的文章

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号