网上书城项目（二）

最新推荐文章于 2022-07-13 21:57:10 发布

Sinner°

最新推荐文章于 2022-07-13 21:57:10 发布

阅读量317

点赞数

文章标签： jquery easyui 中文api

本文链接：https://blog.csdn.net/m0_46890027/article/details/107148596

版权

1，动态绑定下拉框数据（combox组件）

2，后台增加功能

动态绑定下拉框数据（combox组件）

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/css/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/css/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/css/bootstrap.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/addbook.js"></script>
</head>
<body>
	<input type="hidden" id='ctx'
		value="${pageContext.request.contextPath }">
	<form id='ff' style="margin-top: 100px" class="form-horizontal" method="post">
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">书名</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" id="name" name="name"
					placeholder="书名">
			</div>
		</div>
		<!-- 下拉菜单 -->
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">类别</label>
			<div class="col-sm-6">
				<input id="cc" name="cid" value="请选择">
			</div>
		</div>
		<div class="form-group">
			<label for="inputPassword3" class="col-sm-2 control-label">作者</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" id="author" name="author"
					placeholder="作者">
			</div>
		</div>
		<div class="form-group">
			<label for="inputPassword3" class="col-sm-2 control-label">价格</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" id="price" name="price"
					placeholder="价格">
			</div>
		</div>
		<div class="form-group">
			<label for="inputPassword3" class="col-sm-2 control-label">出版社</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" id="publishing" name="publishing"
					placeholder="出版社">
			</div>
		</div>
		<div class="form-group">
			<label for="inputPassword3" class="col-sm-2 control-label">简介</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" id="description" name="description"
					placeholder="简介">
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-3 col-sm-10">
				<button type="submit" class="btn btn-default" id="my_form" >提交</button>
				<button type="reset" class="btn btn-default">清空</button>
			</div>
		</div>

	</form>
</body>
</html>

js代码：

$(function() {
	var ctx = $("#ctx").val();
	$('#cc').combobox({
		url : ctx + '/book.action?opt=combox',
		valueField : 'id',
		textField : 'name'
	});
	$('#ff').form({
		url : ctx + '/book.action?opt=add',
		onSubmit : function() {
			// do some check
			// return false to prevent submit;
		},
		success : function(data) {
			data = eval('(' + data + ')');
            if(data.code==200){
            	alert(data.msg)
            }
		}
	});

})

效果图：

web层方法：

public String combox(HttpServletRequest req,HttpServletResponse resp) throws Exception {
		List<Category> list = this.categoryDao.getAll();
		try {
			ResponseUtil.writeJson(resp, list);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

后台增加功能

效果图：

web层：

public String add(HttpServletRequest req,HttpServletResponse resp) throws Exception {
		this.bookDao.add(book);
		ResponseUtil.writeJson(resp,Result.SUCCESS);
		return null;
	}

responutil：

/**
	 * 对传入节点进行Json解析，并输出到页面
	 * @param 
	 * @param 
	 * @throws 
	 */
	public static void writeJson(HttpServletResponse response,Object o)throws Exception{
		response.setContentType("text/html;charset=utf-8");
		ObjectMapper om=new ObjectMapper();
		String jsonStr = om.writeValueAsString(o);
		PrintWriter out=response.getWriter();
		out.println(jsonStr.toString());
//		System.out.println(jsonStr.toString());
		out.flush();
		out.close();
	}

Sinner°

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网上书城项目（二）

1，动态绑定下拉框数据（combox组件）2，后台增加功能动态绑定下拉框数据（combox组件）<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd".
复制链接

扫一扫