springmvc框架下jquery的ajax使用

文章目录

前台
controller代码
1 前台编写函数，传递数据，进行ajax
2 Params为js的对象，传递过去转为json字符串JSON.stringify(params),
3 传递到后台的路径
4. java后台controller入参
5java后台出参和ajax返回结果

前台

<%@ 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 &copy; 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返回的结果集显示到页面
}

对返回结果进行改变