Spring之使用jQueryAJAX进行数据交互_spring 要用到 jquery吗-优快云博客

本文链接：https://blog.youkuaiyun.com/lazyRabbitLLL/article/details/78615309

这篇博客详细介绍了如何在SpringMVC中利用@Controller和@ResponseBody注解将对象转化为JSON数据，结合页面上的jQuery，使用AJAX进行数据交互。文章强调了在Spring配置文件中启用<mvc:annotation-driven/>的重要性，以及需要的Jackson库。还提到了jQuery的load()方法，用于动态加载页面部分，并提供了参考链接和示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Controller部分

在SpringMVC中可以使用@ResponseBody将对象转换为转化为json格式数据

    @RequestMapping("/getSomething2")
    @ResponseBody()
    public ChartData getSomething2(HttpServletRequest request,String name,Integer value){
        ChartData cd = new ChartData(name,value);
        return cd;
    }
    @RequestMapping("/index")
    public String index(HttpServletRequest request){
        String json = request.getSession().getServletContext().getAttribute("chartdata").toString();
        request.setAttribute("data", json);
        return "index";
    }

2、页面部分

<%@ 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">
<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
<link rel="stylesheet" href="../css/default.css">
<title>Insert title here</title>
</head>
<body>
	<div class="maindiv" >
	<span id="text1"></span><br>
	<span id="text2"></span>
	<div id="sundiv" ></div>
	</div>
	<input type="button" id="btn1" value="点我" class="btn"></input>
	<input type="button" id="btn2" value="点我" class="btn"></input>
	<input type="button" id="btn3" value="点我" class="btn"></input>
	<input type="button" id="btn5" value="点我" class="btn"></input>
	<input type="button" id="btn4" value="点我" class="btn"></input><br>
	<div id="loaddiv"></div>
</body>

<script type="text/javascript">
$(document).ready(function() {
	var options = {
		success : showResponse, // post-submit callback 
		dataType : 'json',
		url:'../ajax/getSomething2',
		data:{name:"Suarez ",value:"199"}
	};
	//jQuery.ajax()
	$('#btn1').click(function(){
		$.ajax(options);
	});
	//jQuery.get()
	$('#btn2').click(function(){
		$.get('../ajax/getSomething2',{name:"Messi",value:"2000"},function(data){
			$('#sundiv').empty();
			$('#text1').html('$.get:'+data.name+' and '+data.value);
		});
	});
	//jQuery.post()
	$('#btn3').click(function(){
		$.post('../ajax/getSomething2',{name:"Neymar",value:"3000"},function(data){
			$('#sundiv').empty();
			$('#text1').html('$.post:'+data.name+' and '+data.value);
		});
	});
	//jQuery.load()
	$('#btn4').click(function(){
		$('#sundiv').load('../ajax/index',function(){
			$('#text1').html('$.load:mlxp');
		});
	});
	//js原生AJAX
	var oBtn = document.getElementById("btn5");
    oBtn.onclick = function(){
    	{
            //1.创建ajax对象
            //只兼容非ie6的浏览器，在ie6浏览器上运行会提示没有被定义
            //var oAjax = new XMLHttpRequest();//这才是ajax实际的请求
            //alert(oAjax);
            
            //ie6浏览器下按照下面方法写,但是在别的浏览器中不能用，会报错。
            //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
            //alert(oAjax);
            
            //鉴于上面出现的问题，可以采取下面的方法解决，用if判断是否为IE6浏览器
            if(window.XMLHttpRequest)//如果有XMLHttpRequest，那就是非IE6浏览器。()里面加window的原因下面会有描述。
            {
                var oAjax = new XMLHttpRequest();//创建ajax对象
            }
            else//如果没有XMLHttpRequest，那就是IE6浏览器
            {
                var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
            }
            
            //2.连接服务器
            //open(方法、文件名、异步传输）
            //方法：
                //传输方式是get方式还是post方式。
            //文件名
                //告诉服务器要读哪个文件
            //异步传输
                //异步：多件事一件一件的做
                //同步：多件事情一起进行
                //但是js里面的同步和异步和现实的同步异步相反。
                    //同步：多件事一件一件的做
                    //异步：多件事情一起进行
            //ajax天生是用来做异步的
            
            oAjax.open("GET","../ajax/getSomething",true);//加上t='+new Date().getTime()"的目的是为了消除缓存，每次的t的值不一样。
            
            //3.发送请求
            oAjax.send();
            
            //4.接收返回
            //客户端和服务器端有交互的时候会调用onreadystatechange
            oAjax.onreadystatechange=function()
            {
                //oAjax.readyState  //浏览器和服务器，进行到哪一步了。
                    //0->（未初始化）：还没有调用 open() 方法。
                    //1->（载入）：已调用 send() 方法，正在发送请求。
                    //2->载入完成）：send() 方法完成，已收到全部响应内容。
                    //3->（解析）：正在解析响应内容。
                    //4->（完成）：响应内容解析完成，可以在客户端调用。
                if(oAjax.readyState==4)
                {
                    if(oAjax.status==200)//判断是否成功,如果是200，就代表成功
                    {
                        $('#sundiv').empty();
            			$('#text1').html('$.post:'+oAjax.responseText);
                    }
                    else
                    {
                        alert("失败");
                    }
                }
            };
        }
    }
});
function showResponse(data){
	$('#sundiv').empty();
	$('#text1').html('$.ajax:'+data.name+' and '+data.value);
}
	$("#btn1").ajaxSuccess(function(evt, request, settings){
		$('#text2').html("AJAX 请求已成功完成");
	});
// 	$("#btn1").ajaxStart(function(){
// 		$('#text2').html("AJAX 请求已开始");
// 	});
// 	$("#btn1").ajaxComplete(function(){
// 		$('#text2').html("AJAX 请求已完成");
// 	});
</script>
</html>

#point

1）@ResponseBody：该注解用于将Controller方法返回的对象，通过适当的HttpMessageConverter转换为指定格式后（如：json格式），写入到Response对象的body数据区。

2）在SpringMVC的配置文件中配置<mvc:annotation-driven/>，它可以向Spring中注册用来处理请求、映射、异常的Bean实例。

3）需要导入的jar包：

jackson-all-1.7.6.jar

jackson-core-asl-1.9.13.jar

jackson-mapper-asl-1.9.13.jar

4）load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中，在加载页面时可以选择只加载页面的某个部分。

5）jQuery部分参考：http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

Demo：http://download.youkuaiyun.com/download/lazyrabbitlll/10131155