您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

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

51自学网 2022-02-21 10:52:39
  ajax

 1. 前台jsp,新建一个下拉控件

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

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

<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. 新建一个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动态为下拉列表添加数据的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对51zixue.net网站的支持!


下载地址:
AJAX +SpringMVC 实现bootstrap模态框的分页查询功能
Ajax跨域访问Cookie丢失问题的解决方法
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1