Ajax动态为下拉列表添加数据的实现方法 - AJAX相关 - 软件开发资源站

首页 > 网络编程 > AJAX相关 > Ajax动态为下拉列表添加数据的实现方法

Ajax动态为下拉列表添加数据的实现方法
类别：AJAX相关作者：码皇来源：互联网点击：

这篇文章主要介绍了Ajax动态为下拉列表添加数据的实现方法,需要的朋友可以参考下

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

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

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></option>");
//添加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<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）。所以先要写一个方法读取数据库中的数据

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<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下拉列表添加数据

上一篇：AJAX +SpringMVC 实现bootstrap模态框的分页查询功能
下一篇：Ajax跨域访问Cookie丢失问题的解决方法

Ajax动态为下拉列表添加数据的实现方法 类别：AJAX相关 作者：码皇 来源：互联网 点击：

Ajax动态为下拉列表添加数据的实现方法
类别：AJAX相关作者：码皇来源：互联网点击：