先上代码
Servlet代码
package com.mtqj.quotes.servlet;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import com.mtqj.quotes.Util.DBUtil;
import com.mtqj.quotes.model.Category;
public class CategoryServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String mid = request.getParameter("mid");
ArrayList<Category> categoryList = new ArrayList<Category>();
String sql = "select * from Category where m_id = ? ;";
Connection conn = DBUtil.getConn();
PreparedStatement ps = null;
ResultSet rs = null;
try {
ps = conn.prepareStatement(sql);
ps.setString(1, mid);
rs = ps.executeQuery();
while (rs.next()) {
Category c = new Category();
c.setC_id(rs.getInt("C_id"));
c.setM_id(rs.getInt("M_id"));
c.setCategory(rs.getString("Category"));
c.setFee(rs.getFloat("Fee"));
categoryList.add(c);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
DBUtil.close(rs, ps, conn);
}
JSONArray bb = JSONArray.fromObject(categoryList);
System.out.println(bb);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
JS代码
$(function() {
$("#material").change(function() {
var m_id = $("#material").val();
var price = $("#" + m_id).val();
$("#pricediv").html(price);
$.get("CategoryServlet", {"mid" : m_id,"time" : new Date().getTime()}, function(data, textstatu) {
alert(data);
})
});
})
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
请选择材质：
<br>
<c:if test="${not empty materialList }">
<select id="material">
<option value="">----请选择----</option>
<c:forEach items="${materialList}" var="u">
<option id="id" value="${u.m_id }">${u.m_id }、${u.material}</option>
</c:forEach>
</select>
<c:forEach items="${materialList}" var="u">
<input id="${u.m_id }" value="${u.price }" type="hidden"></input>
<input id="${u.m_id }" value="${u.m_id }" type="hidden"></input>
</c:forEach>
<div id="pricediv"></div>
</c:if>
<br> 请选择产品类别：
<br>
<select id="category">
<option value="">----请选择----</option>
</select>
<br>
<br> 请选择包装类型：
<br>
<select id="package">
<option value="">----请选择----</option>
</select>
<%-- </c:if> --%>
<br>
<br> 请选择表面处理：
<br>
<select id="surface">
<option value="">----请选择----</option>
</select>
<br>
<br>
</body>
</html>
我在控制台已经看到所获取的数据了
[{"c_id":9,"category":"焊接直通","fee":300,"m_id":2},{"c_id":10,"category":"非焊接直通","fee":400,"m_id":2},{"c_id":11,"category":"弯通","fee":500,"m_id":2},{"c_id":12,"category":"附配件","fee":500,"m_id":2},{"c_id":13,"category":"焊接支架","fee":500,"m_id":2},{"c_id":14,"category":"非焊接支架（钻孔）","fee":500,"m_id":2},{"c_id":15,"category":"非焊接支架（不钻孔）","fee":300,"m_id":2},{"c_id":16,"category":"竖井","fee":800,"m_id":2}]如何将获取的这些数据传递到前台，并且在jsp页面的<select>中展示出来
<select id="category">
<option value="">----请选择----</option>
</select>
------解决思路----------------------
doGet()方法里最后加上
response.getwriter().write(bb.toString());
response.getwriter().close();
前台循环data给select动态赋值
------解决思路----------------------
$(function() {
$("#material").change(function() {
var m_id = $("#material").val();
var price = $("#" + m_id).val();
$("#pricediv").html(price);
$.get("CategoryServlet", {"mid" : m_id,"time" : new Date().getTime()}, function(data, textstatu) {
var categorySelect = $("#category");
categorySelect.empty();
for(var i=0;i<data.length;i++) {
var option = $("<option>").text(data[i].category).val(data[i].c_id);
categorySelect.append(option);
}
})
});
})------解决思路----------------------
$(function() {
$("#material").change(function() {
var m_id = $("#material").val();
var price = $("#" + m_id).val();
$("#pricediv").html(price);
$.get("CategoryServlet", {"mid" : m_id,"time" : new Date().getTime()}, function(data, textstatu) {
var categorySelect = $("#category");
categorySelect.empty();
$.each(data, function(i, item) {
var option = $("<option>").text(item.category).val(item.c_id);
categorySelect.append(option);
});
})
});
})那用$.each读看看
------解决思路----------------------
如果还是不行，那么把$.get()的返回类型指定为JSON
------解决思路----------------------
数据已经返回到前台就和后台没有关系了
把返回类型json先加上
$.get("CategoryServlet", {"mid" : m_id,"time" : new Date().getTime()}, function(data, textstatu) {
var categorySelect = $("#category");
categorySelect.empty();
$.each(data, function(i, item) {
var option = $("<option>").text(item.category).val(item.c_id);
categorySelect.append(option);
});
},"json");
------解决思路----------------------
修改下这段代码
categorySelect.empty();
var firstoption = $("<option>").text("---请选择---").val("");
categorySelect.append(firstoption);