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

来源：互联网发布：整形医院网络咨询招聘编辑：程序博客网时间：2024/06/12 18:58

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原生AJAXvar 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

阅读全文

0 0