web前端|js教程
Ajax,添加,列表
web前端-js教程 1. 前台jsp，新建一个下拉控件
如何把网站源码变成织梦源码,ubuntu新建空白图片,大连热带爬虫馆,php strlower,永春网站seolzw
2. js部分，建一个function方法，利用ajax，指向 ‘getAllTypes.action’ 的servlet部分，获取传来的下拉列表的数据，动态填充
10分时时彩平台源码,vscode怎么撤销删除,ubuntu设置vp,tomcat部署应用端口,sqlite可存多大数据,家里老是有黑色的爬虫怎么回事,学生选课系统 php,SEO推广网站优化排名,手机wap网站定位,织梦制作手机网站模板lzw
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返回数据
游戏公会源码,vscode 内置网页插件,神舟 战神 ubuntu,tomcat发布路径在哪,爬虫绕过了反爬虫算违法么,php加减乘除,黄山seo优化外包价格,驾校系统 网站模板,高中学校网站模板lzw
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 ，现在打开网页，下拉列表就能显示数据了
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
设置Access-Control-Allow-Origin实现跨域访问
Ajax实现注册并选择头像后上传功能
细数Ajax请求中的async:false和async:true的差异
