Shop项目后台--1.商品添加页面的类别ajax显示
2018-01-14 14:33
316 查看
分析：
在admin后台点击“商品管理”页面，点击添加时候进入后台地址${pageContext.request.contextPath}/admin/product/add.jsp开始编码。
一、首页要动态获取商品的分类，通过ajax技术完成。
1、引入JQuery文件，然后加入页面加载事件，该事件通过ajax异步在后台执行代码查询到商品所有分类集合categoryList，同时以json字符串形式返回。[{"cid":xxx，"cname":xxx},{},{}]
2、获取到json后需要拼接多个<option value="></option>字符串,所以加上<option>所属位置的<select>加上id以便获取同时删除写死的<option>。
3、开始拼接字符串，同时在ajax回调函数中，把这些字符串放在select的位置上，完成拼接。
准备：
jquery-1.11.3.min.js
gson-2.2.4.jar
步骤：
在add.jsp
1.引入JQuery，加入页面加载事件，$post异步查询商品分类列表。
在AdminServlet
2.查询商品分类列表categoryList，以json格式字符串返回给ajax
在add.jsp
3.在$.post()返回函数开始拼接<option value=""></option>，放在所在的<select>
add.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="${pageContext.request.contextPath}/css/Style1.css" type="text/css" rel="stylesheet">
<!-- 引入Jquery文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<!-- 添加页面加载事件 -->
<script type="text/javascript">
$(function(){
//加入alert();验证绑定页面加载事件成功
//ajax 异步获取商品分类所有列表
$.post(
//1.输入执行的url
"${pageContext.request.contextPath}/admin?method=findAllCategory",
//2.传递的数据，因为这不需要传递数据，直接省略
//3.返回数据执行的函数
function(data){
//返回的是category对象集合以json格式字符串表示[{"cid":xx,"cname":xxx},{},{}]
//拼接多个<option value=""></option>放到select中
var content="";
for(var i=0;i<data.length;i++){
//因为字符串 注意value的双引号这里要改为单引号
content+="<option value='"+data[i].cid+"'>"+data[i].cname+"</option>";
}
//把拼好的串放到select中
$("#cid").html(content);
},
//4.返回数据的格式
"json"
);
})
</script>
</HEAD>
<body>
<!-- -->
<form id="userAction_save_do" name="Form1" action="${pageContext.request.contextPath}/adminProduct_save.action" method="post" enctype="multipart/form-data">
<table cellSpacing="1" cellPadding="5" width="100%" align="center" bgColor="#eeeeee" style="border: 1px solid #8ba7e3" border="0">
<tr>
<td class="ta_01" align="center" bgColor="#afd1f3" colSpan="4"
height="26">
<strong><STRONG>添加商品</STRONG>
</strong>
</td>
</tr>
<tr>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
商品名称：
</td>
<td class="ta_01" bgColor="#ffffff">
<input type="text" name="pname" value="" id="userAction_save_do_logonName" class="bg"/>
</td>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
是否热门：
</td>
<td class="ta_01" bgColor="#ffffff">
<select name="is_hot">
<option value="1">是</option>
<option value="0">否</option>
</select>
</td>
</tr>
<tr>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
市场价格：
</td>
<td class="ta_01" bgColor="#ffffff">
<input type="text" name="market_price" value="" id="userAction_save_do_logonName" class="bg"/>
</td>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
商城价格：
</td>
<td class="ta_01" bgColor="#ffffff">
<input type="text" name="shop_price" value="" id="userAction_save_do_logonName" class="bg"/>
</td>
</tr>
<tr>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
商品图片：
</td>
<td class="ta_01" bgColor="#ffffff" colspan="3">
<input type="file" name="upload" />
</td>
</tr>
<tr>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
所属分类：
</td>
<td class="ta_01" bgColor="#ffffff" colspan="3">
<!-- 加上cname方便获取 修改name值 -->
<select id="cid" name="cname">
<!-- 拼接option字符串的位置 -->
</select>
</td>
</tr>
<tr>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
商品描述：
</td>
<td class="ta_01" bgColor="#ffffff" colspan="3">
<textarea name="pdesc" rows="5" cols="30"></textarea>
</td>
</tr>
<tr>
<td class="ta_01" style="WIDTH: 100%" align="center"
bgColor="#f5fafe" colSpan="4">
<button type="submit" id="userAction_save_do_submit" value="确定" class="button_ok">
确定
</button>
<FONT face="宋体"> </FONT>
<button type="reset" value="重置" class="button_cancel">重置</button>
<FONT face="宋体"> </FONT>
<INPUT class="button_ok" type="button" onclick="history.go(-1)" value="返回"/>
<span id="Label1"></span>
</td>
</tr>
</table>
</form>
</body>
</HTML>AdminServlet
package com.itheima.web.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.itheima.domain.Category;
import com.itheima.web.service.AdminService;
public class AdminServlet extends BaseServlet {
//获取商品的所有分类
public void findAllCategory(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//提供一个List<Category> 转成jason字符串
AdminService service = new AdminService();
List<Category> categoryList = service.findAllCategory();
//把categoryList转为jason字符串
Gson gson = new Gson();
String json = gson.toJson(categoryList);
//因为可能有中文，需要指定编码
response.setContentType("text/json;charset=UTF-8");
//把json字符串传回给ajax
response.getWriter().write(json);
}
}
AdminService
package com.itheima.web.service;
import java.sql.SQLException;
import java.util.List;
import com.itheima.domain.Category;
import com.itheima.web.dao.AdminDao;
public class AdminService {
//获取商品所有分类列表集合
public List<Category> findAllCategory() {
AdminDao dao = new AdminDao();
List<Category> categoryList=null;
try {
categoryList = dao.findAllCategory();
} catch (SQLException e) {
e.printStackTrace();
}
return categoryList;
}
}
AdminDao
package com.itheima.web.dao;
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutil
b691
s.handlers.BeanListHandler;
import com.itheima.domain.Category;
import com.itheima.utils.DataSourceUtils;
public class AdminDao {
//获取所有商品分类列表集合
public List<Category> findAllCategory() throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select * from category";
List<Category> query = runner.query(sql, new BeanListHandler<Category>(Category.class));
return query;
}
}
在admin后台点击“商品管理”页面，点击添加时候进入后台地址${pageContext.request.contextPath}/admin/product/add.jsp开始编码。
一、首页要动态获取商品的分类，通过ajax技术完成。
1、引入JQuery文件，然后加入页面加载事件，该事件通过ajax异步在后台执行代码查询到商品所有分类集合categoryList，同时以json字符串形式返回。[{"cid":xxx，"cname":xxx},{},{}]
2、获取到json后需要拼接多个<option value="></option>字符串,所以加上<option>所属位置的<select>加上id以便获取同时删除写死的<option>。
3、开始拼接字符串，同时在ajax回调函数中，把这些字符串放在select的位置上，完成拼接。
准备：
jquery-1.11.3.min.js
gson-2.2.4.jar
步骤：
在add.jsp
1.引入JQuery，加入页面加载事件，$post异步查询商品分类列表。
在AdminServlet
2.查询商品分类列表categoryList，以json格式字符串返回给ajax
在add.jsp
3.在$.post()返回函数开始拼接<option value=""></option>，放在所在的<select>
add.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="${pageContext.request.contextPath}/css/Style1.css" type="text/css" rel="stylesheet">
<!-- 引入Jquery文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<!-- 添加页面加载事件 -->
<script type="text/javascript">
$(function(){
//加入alert();验证绑定页面加载事件成功
//ajax 异步获取商品分类所有列表
$.post(
//1.输入执行的url
"${pageContext.request.contextPath}/admin?method=findAllCategory",
//2.传递的数据，因为这不需要传递数据，直接省略
//3.返回数据执行的函数
function(data){
//返回的是category对象集合以json格式字符串表示[{"cid":xx,"cname":xxx},{},{}]
//拼接多个<option value=""></option>放到select中
var content="";
for(var i=0;i<data.length;i++){
//因为字符串 注意value的双引号这里要改为单引号
content+="<option value='"+data[i].cid+"'>"+data[i].cname+"</option>";
}
//把拼好的串放到select中
$("#cid").html(content);
},
//4.返回数据的格式
"json"
);
})
</script>
</HEAD>
<body>
<!-- -->
<form id="userAction_save_do" name="Form1" action="${pageContext.request.contextPath}/adminProduct_save.action" method="post" enctype="multipart/form-data">
<table cellSpacing="1" cellPadding="5" width="100%" align="center" bgColor="#eeeeee" style="border: 1px solid #8ba7e3" border="0">
<tr>
<td class="ta_01" align="center" bgColor="#afd1f3" colSpan="4"
height="26">
<strong><STRONG>添加商品</STRONG>
</strong>
</td>
</tr>
<tr>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
商品名称：
</td>
<td class="ta_01" bgColor="#ffffff">
<input type="text" name="pname" value="" id="userAction_save_do_logonName" class="bg"/>
</td>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
是否热门：
</td>
<td class="ta_01" bgColor="#ffffff">
<select name="is_hot">
<option value="1">是</option>
<option value="0">否</option>
</select>
</td>
</tr>
<tr>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
市场价格：
</td>
<td class="ta_01" bgColor="#ffffff">
<input type="text" name="market_price" value="" id="userAction_save_do_logonName" class="bg"/>
</td>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
商城价格：
</td>
<td class="ta_01" bgColor="#ffffff">
<input type="text" name="shop_price" value="" id="userAction_save_do_logonName" class="bg"/>
</td>
</tr>
<tr>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
商品图片：
</td>
<td class="ta_01" bgColor="#ffffff" colspan="3">
<input type="file" name="upload" />
</td>
</tr>
<tr>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
所属分类：
</td>
<td class="ta_01" bgColor="#ffffff" colspan="3">
<!-- 加上cname方便获取 修改name值 -->
<select id="cid" name="cname">
<!-- 拼接option字符串的位置 -->
</select>
</td>
</tr>
<tr>
<td width="18%" align="center" bgColor="#f5fafe" class="ta_01">
商品描述：
</td>
<td class="ta_01" bgColor="#ffffff" colspan="3">
<textarea name="pdesc" rows="5" cols="30"></textarea>
</td>
</tr>
<tr>
<td class="ta_01" style="WIDTH: 100%" align="center"
bgColor="#f5fafe" colSpan="4">
<button type="submit" id="userAction_save_do_submit" value="确定" class="button_ok">
确定
</button>
<FONT face="宋体"> </FONT>
<button type="reset" value="重置" class="button_cancel">重置</button>
<FONT face="宋体"> </FONT>
<INPUT class="button_ok" type="button" onclick="history.go(-1)" value="返回"/>
<span id="Label1"></span>
</td>
</tr>
</table>
</form>
</body>
</HTML>AdminServlet
package com.itheima.web.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.itheima.domain.Category;
import com.itheima.web.service.AdminService;
public class AdminServlet extends BaseServlet {
//获取商品的所有分类
public void findAllCategory(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//提供一个List<Category> 转成jason字符串
AdminService service = new AdminService();
List<Category> categoryList = service.findAllCategory();
//把categoryList转为jason字符串
Gson gson = new Gson();
String json = gson.toJson(categoryList);
//因为可能有中文，需要指定编码
response.setContentType("text/json;charset=UTF-8");
//把json字符串传回给ajax
response.getWriter().write(json);
}
}
AdminService
package com.itheima.web.service;
import java.sql.SQLException;
import java.util.List;
import com.itheima.domain.Category;
import com.itheima.web.dao.AdminDao;
public class AdminService {
//获取商品所有分类列表集合
public List<Category> findAllCategory() {
AdminDao dao = new AdminDao();
List<Category> categoryList=null;
try {
categoryList = dao.findAllCategory();
} catch (SQLException e) {
e.printStackTrace();
}
return categoryList;
}
}
AdminDao
package com.itheima.web.dao;
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutil
b691
s.handlers.BeanListHandler;
import com.itheima.domain.Category;
import com.itheima.utils.DataSourceUtils;
public class AdminDao {
//获取所有商品分类列表集合
public List<Category> findAllCategory() throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select * from category";
List<Category> query = runner.query(sql, new BeanListHandler<Category>(Category.class));
return query;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 案例36-商品添加页面类别ajax显示
- Shop项目后台--2.商品的添加
- ideal中如何添加几个不同的项目在同一个idea页面显示(同一个窗口显示多个工程)
- 【SSH网上商城项目实战09】添加和更新商品类别功能的实现
- 定时请求php 后台 AJAX 请求，在页面中倒计时，和显示刷新时间
- 商城项目笔记1，顶层商品类别的添加（注意JSP,Bean,DAO,DB的分层书写结构）
- 项目实践——商品后台管理中的商品添加
- 【SSH网上商城项目实战09】添加和更新商品类别功能的实现
- [Ajax]便于在html页面中引用javascript显示后台数据的一段ajax代码
- SSH框架网上商城项目第9战之添加和更新商品类别功能实现
- 让前台页面商品列表显示后台数据库中的商品
- Ajax 异步或取后台数据json显示到页面
- Shop项目--5. 显示商品详细信息,product_info.jsp
- Shop项目--3. 使用ajax获取商品分类列表，并存在redis中
- [置顶] ajax请求得到后台数据，前台页面，使用table模板然后clone，显示表格，，不用append拼接 “字符串和HTML表格标签”
- 添加数据之后不跳页面显示一个漂亮的提示信息（非ajax提交数据）
- Shop项目--4. 分页显示商品的，与分页跳转，上一页，下一页product_list.jsp
- 分布式架构项目中各模块中页面发送ajax请求后台json数据的传输问题
- 【SSH网上商城项目实战09】添加和更新商品类别功能的实现
- AJAX第五步：使用ajax解决页面首页显示后台数据的问题