您的位置：首页 > Web前端 > JQuery

SpringMVC框架下使用jQueryAJAX进行数据交互

2017-11-23 16:29 393 查看
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.csdn.net/download/lazyrabbitlll/10131155
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航