现在的位置: 首页 > web前端 > 正文

SpringMVC处理ajax请求

2017年09月12日 web前端 ⁄ 共 2764字 ⁄ 字号 评论关闭

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

SpringMVC+MyBatis+Spring整合

SpringMVC+Spring+Hibernate整合

不整合任何框架的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>

控制台打印结果

页面加载后的效果

以上是一个非常简单的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
                        }
		});
	}

抱歉!评论已关闭.