SpringMVC处理ajax请求

桃扇骨 2022-09-18 11:48 177阅读 0赞

由于之前我写过几篇关于如何搭建SpringMVC项目的日志，故在本文中不在写各种配置怎么写。只写涉及到处理ajax请求的代码。如果有想了解SpringMVC项目怎么搭建的朋友，请选择如下合适你的链接进去交流。

[SpringMVC+MyBatis+Spring整合][SpringMVC_MyBatis_Spring]

[SpringMVC+Spring+Hibernate整合][SpringMVC_Spring_Hibernate]

[不整合任何框架的SpringMVC环境][SpringMVC]

好，正文开始

**Controller的代码**

package com.action;
    
    import java.io.UnsupportedEncodingException;
    import java.util.List;
    
    import javax.annotation.Resource;
    import javax.servlet.ServletContext;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpSession;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.ModelMap;
    import org.springframework.web.bind.annotation.ModelAttribute;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.bind.annotation.SessionAttributes;
    
    import com.bean.User;
    import com.service.IUserService;
    
    /**
     * action层我也是用注解配的，这里面的注解@RequestMapping的具体作用见上一篇SpringMVC入门笔记
     * @author 百木森森
     *
     */
    @Controller
    @RequestMapping("testPath")
    public class TestAction {
    
    	@Resource
    	private IUserService userService;
    	
    	@RequestMapping("ajaxTest")
    	@ResponseBody
    	public ModelMap ajaxTest(){
    		System.out.println("进ajax的action了");
    		ModelMap model=new ModelMap();
    		model.addAttribute("key", "I'm value");
    		return model;
    	}
    }

**网页的写法**

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!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">
    <script type="text/javascript" src="<%=path%>/js/jquery-1.10.2.js"></script>
    <script type="text/javascript">
    $(function(){
    	alert("ajax一级准备！");
    	$.ajax({
    		url:"<%=path%>/testPath/ajaxTest.action",
    		type:"post",
    		success:function(data){
    			alert(data.key);
    		}
    	})
    })
    </script>
    <title>Insert title here</title>
    </head>
    <body>
    <h1>success!!!</h1><br/>
    </body>
    </html>

**控制台打印结果**

![SouthEast][]

**页面加载后的效果**

![SouthEast 1][]

以上是一个非常简单的ajax操作，不包含json的传值，下面贴一个包含了json传值的代码

Controller中的代码

@RequestMapping("queryuseradvice")
    	@ResponseBody
    	public ModelMap queryUserAdvice(ModelMap model, 
    			@RequestParam int pageNo,
    			@RequestParam int pageSize){
    		
    		int count=this.qyjUserAdviceService.queryCount();//从数据库查满足条件的数据的数量
    		int totalPage=count%pageSize==0?count/pageSize:count/pageSize+1;//计算共有几页
    		
    		//将总页数和所有要传回页面的数据集合存入model中
    		model.addAttribute("totalPage", totalPage);
    		model.addAttribute("adviceList", this.qyjUserAdviceService.queryAdvice(pageNo, pageSize));
    		
    		return model;
    	}

js代码（只包含ajax部分）

function queryAdviceBy(pageNo, pageSize) {
    		$("#none").hide();
    		$.ajax({
    			type:"post",
    			url:"adviceTest/queryuseradvice",
    			cache:false,
    			dataType:"json",
    			data:{
    				pageNo:pageNo,
    				pageSize:pageSize
    			},
    			success:function(data) {
                              //省略回调函数的内容
                              //想得到Controller中传回的值得话像如下这样做
                              data.totalPage
                              data.adviceList
                            }
    		});
    	}

[SpringMVC_MyBatis_Spring]: http://blog.csdn.net/baimusensen/article/details/16843599
[SpringMVC_Spring_Hibernate]: http://blog.csdn.net/baimusensenhttp://blog.csdn.net/baimusensen/article/details/16329835
[SpringMVC]: http://blog.csdn.net/baimusensen/article/details/16120429
[SouthEast]: /images/20220828/45df7b53bc7a4e88866a89dbfc040f20.png
[SouthEast 1]: /images/20220828/0e98de572ef5449d9b0c7966bf181aaf.png