文章目录
前台
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>上架商品-ajax</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/conf1/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/conf1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/conf1/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<script type="text/javascript">
function getRealPath(){
//获取当前网址,如: http://localhost:8083/myproj/view/ahha.jsp
var curWwwPath=window.document.location.href;
//获取主机地址之后的目录,如: myproj/view/ahha.jsp
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取主机地址,如: http://localhost:8080
var localhostPaht=curWwwPath.substring(0,pos);
//获取带"/"的项目名,如:/ahha
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
//得到了 服务器名称和项目名称
var realPath=localhostPaht+projectName;
return realPath;
}
function downProduct(id){
var params = {
id : id
};
alert(JSON.stringify(params));
var nowUrl=getRealPath()+"/admin/downProductAjax.do";
$.ajax({
type : "post",
url : "./downProductAjax.do",//访问路径
dataType : "json",
contentType : "application/json",
data : JSON.stringify(params),
timeout : 5000,
error : alertSuccess,
global : false,
success : alertSuccess,//查询成功处理函数
});
}
function alertSuccess(result) {
// 处理返回的数据result
alert(result.info);
alert(result.product.name);
//通过处理result返回的结果集显示到页面
}
</script>
<body>
<div class="wrapper">
<jsp:include page="side_admin.jsp"></jsp:include>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>下架商品</h1>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">商品列表</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>商品编号</th>
<th>卖家名字</th>
<th>商品名字</th>
<th>商品种类</th>
<th>商品价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${products }" var="product" >
<tr>
<td>${product.id }</td>
<td>${product.sellerName }</td>
<td>${product.name }</td>
<td>${product.categoryName }</td>
<td>${product.price }</td>
<td>
<button type="button" class="btn btn-primary"
onclick="downProduct(${product.id })">下架</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="float-right d-none d-sm-block">
<b></b>
</div>
<strong>Copyright © 2018 <a href="#">中央财经大学</a>.</strong> All rights
reserved.
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
<!-- jQuery -->
<script src="${pageContext.request.contextPath}/conf1/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="${pageContext.request.contextPath}/conf1/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- FastClick -->
<script src="${pageContext.request.contextPath}/conf1/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="${pageContext.request.contextPath}/conf1/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="${pageContext.request.contextPath}/conf1/dist/js/demo.js"></script>
</body>
</html>
controller代码
@ResponseBody
@RequestMapping(value="/downProductAjax")
public Map<String, Object> downProductAjax(@RequestBody Map<String,Object> map1)throws Exception{
System.out.println("ok1");
System.out.println(map1.get("id").toString());
Integer productId=(Integer)map1.get("id");
adminService.downProduct(productId);
Product product=adminService.getProductById(productId);
Map<String, Object> map =new HashMap<String, Object>();
map.put("info", "商品"+product.getName()+"上架成功");
map.put("product", product);
map.put("info", "进入成功");
return map;
}
关键点
1 前台编写函数,传递数据,进行ajax
function downProduct(id){
var params = {
id : id
};
alert(JSON.stringify(params));
var nowUrl=getRealPath()+"/admin/downProductAjax.do";
$.ajax({
type : "post",
url : "./downProductAjax.do",//访问路径
dataType : "json",
contentType : "application/json",
data : JSON.stringify(params),
timeout : 5000,
error : alertSuccess,
global : false,
success : alertSuccess,//查询成功处理函数
});
}
function alertSuccess(result) {
// 处理返回的数据result
alert(result.info);
alert(result.product.name);
//通过处理result返回的结果集显示到页面
}
2 Params为js的对象,传递过去转为json字符串JSON.stringify(params),
3 传递到后台的路径
本页面的路径为
http://localhost:8080/campus_second_ssh/admin/showCanSellProductsAjax.do
url : “./downProductAjax.do”,//访问路径
传递的路径实际为
http://localhost:8080/campus_second_ssh/admin/downProductAjax.do
用./xxx现在可以
如果是
url : “././admin/downProductAjax.do”,//访问路径
(0 ms) [http-nio-8080-exec-4] WARN : org.springframework.web.servlet.PageNotFound#noHandlerFound :
No mapping found for HTTP request with URI
[/campus_second_ssh/admin/admin/downProductAjax.do] in DispatcherServlet with name ‘mvc’
相当于两次./只有一次的效果
如果是
url : “/admin/downProductAjax.do”
后台springmvc没有反应,可能路径没有到/campus_second_ssh/里来
如果是
url : “/campus_second_ssh/admin/admin/downProductAjax.do”,//访问路径
(0 ms) [http-nio-8080-exec-9] WARN : org.springframework.web.servlet.PageNotFound#noHandlerFound :
No mapping found for HTTP request with URI [
/campus_second_ssh/admin/admin/downProductAjax.do]
in DispatcherServlet with name ‘mvc’
这次多加了admin,应该是可以的
如果是
url : “/campus_second_ssh/admin/downProductAjax.do”,//访问路径
成功
得到结论,如果是同一个大的controller下的,可以用./xxx.do
如果不是,可以用/项目名/xxx/xxx.do
4. java后台controller入参
@ResponseBody
@RequestMapping(value="/downProductAjax")
public Map<String, Object> downProductAjax(@RequestBody Map<String,Object> map1)throws Exception{
System.out.println("ok1");
System.out.println(map1.get("id").toString());
入参的关键是@RequestBody Map<String,Object> map1
必须有requestbody标签
这个对象可以是一个string object的map
也可以是一个string
也可以是一个po类,
springmvc通过requestbody,将json字符串转为map或者单个的string或者封装为po类
但是经过测试,如果是int类型不知道为什么无法进入,留待以后研究
5java后台出参和ajax返回结果
Map<String, Object> map =new HashMap<String, Object>();
map.put("info", "商品"+product.getName()+"上架成功");
map.put("product", product);
map.put("info", "进入成功");
return map;
首先,返回时必须要有responsebody标签
然后返回时可以返回一个map,将object装在map中,这样比较好
然后ajax根据返回的对象
success : alertSuccess,//查询成功处理函数
});
}
function alertSuccess(result) {
// 处理返回的数据result
alert(result.info);
alert(result.product.name);
//通过处理result返回的结果集显示到页面
}
对返回结果进行改变