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

这篇文章主要为大家详细介绍了Ajax动态为下拉列表添加数据的实现方法，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

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

$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;

//

}

}

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

原文链接：http://blog.youkuaiyun.com/chauncywu/article/details/54670716

(512笔记 512pic.com)

注：关于Ajax动态为下拉列表添加数据的实现方法的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：AJAX