`
a137268431
  • 浏览: 145309 次
文章分类
社区版块
存档分类
最新评论

Spring mvc系列六之 ajax运用(基于json格式)

 
阅读更多

此篇文章的讲解是基于前几篇文章的内容,如果大家有看不懂的地方可以看前几篇的内容.

spring mvc返回json数据可方法常用的有

  • 直接PrintWriter 输出
  • 使用Spring内置的支持

下面我分别对上面的两种方法进行讲解:注意这篇文章的讲解使用的是spring3.2版本,此版本与spring 3.0的配置有少许不同,希望大家注意,同时我使用的是jquery做演示.

首先讲解直接PrintWriter 输出,这个是最简单的,但是不可以使用java的复杂对象.

没有什么需要配置的,直接请求我们的ajax请求页面json.jsp.

Html代码收藏代码
  1. <%@pagelanguage="java"contentType="text/html;charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <basehref="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
  7. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
  8. <scripttype="text/javascript"src="script/jquery-1.8.3.js"></script>
  9. <title>添加用户</title>
  10. <scripttype="text/javascript">
  11. $(function(){
  12. $("form:button").click(function(){
  13. varname=$("#name").val();
  14. varage=$("#age").val();
  15. $.ajax({
  16. type:"POST",
  17. url:"user/addUser",
  18. data:{name:name,age:age},
  19. success:function(data){
  20. alert("名字:"+data.name+"年龄:"+data.age);
  21. }
  22. });
  23. });
  24. });
  25. </script>
  26. </head>
  27. <body>
  28. <formaction="user/addUser"method="post">
  29. 用户名:<inputtype="text"id="name"name="name"/><br/>
  30. 年龄:<inputtype="text"id="age"name="age"/>
  31. <inputtype="button"value="提交"/>
  32. </form>
  33. </body>
  34. </html>

给提示按钮添加点击事件,当提交表单时获取用户名name,和年龄age,以post的方式提交表user/addUser,并把服务器返回的数据显示出来,这里要注意JSP页面头上最好加上

Html代码收藏代码
  1. <basehref="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">

使用绝对路径,一切从根目录开始找起,要不然会因为路径问题,而且很烦,js也要声明为spring mvc不要拦截,这里之前文章有说过

Controller:

Java代码收藏代码
  1. packagegd.hz.springmvc.controller;
  3. importjava.io.IOException;
  4. importjava.io.PrintWriter;
  6. importjavax.servlet.http.HttpServletRequest;
  7. importjavax.servlet.http.HttpServletResponse;
  9. importgd.hz.springmvc.model.User;
  11. importorg.springframework.stereotype.Controller;
  12. importorg.springframework.web.bind.annotation.RequestMapping;
  14. @Controller("userController")
  15. @RequestMapping("user")
  16. publicclassUserController{
  18. //ajax请求一
  19. @RequestMapping("addUser")
  20. publicvoidaddUser(Useruser,HttpServletRequestrequest,
  21. HttpServletResponseresponse){
  22. //这里不能用单引号,无效,死的心都有
  23. System.out.println("过来了");
  24. Stringresult="{\"name\":\""+user.getName()+"\"}";
  25. PrintWriterout=null;
  26. System.out.println(result);
  27. response.setContentType("application/json");
  28. try{
  29. out=response.getWriter();
  30. out.write(result);
  31. }catch(IOExceptione){
  32. e.printStackTrace();
  33. }
  34. }
  35. }

这里我们用User这个实体接收ajax传过来的参数,当然也可以这样写:

Java代码收藏代码
  1. publicvoidaddUser(Stringname,intage,HttpServletRequestrequest,HttpServletResponseresponse)

注意名字要与from表单传过来的参数名称一样,当然也可以不一样,不一样时的用法可以看我之前的文章.

User类:

Java代码收藏代码
  1. packagegd.hz.springmvc.model;
  3. publicclassUser{
  4. privateStringname;
  5. privateintage;
  7. publicStringgetName(){
  8. returnname;
  9. }
  10. publicvoidsetName(Stringname){
  11. this.name=name;
  12. }
  14. publicintgetAge(){
  15. returnage;
  16. }
  17. publicvoidsetAge(intage){
  18. this.age=age;
  19. }
  20. }

Java代码收藏代码
  1. Stringresult="{\"name\":\""+user.getName()+"\"}";

这句话,把传过来的数据拼成类json格式("key":"value"),这里要注意字符串里面的双引号不能用单引号表示,

Java代码收藏代码
  1. response.setContentType("application/json");

修改协议头,声明返回json格式.然后输出.测试时可要注意年龄输入数字.

使用Spring内置的支持返回json.这个方法比较灵活,虽然复杂了一点,不过建议使用:

首先这里需要引入commons-fileupload-*.jar commons-io-*.jar commons-logging-*.jar jackson-annotations-*.jar jackson-core-*.jar jackson-databind-*.jar

看一下spring mvc的配置文件的配置

Xml代码收藏代码
  1. <?xmlversion="1.0"encoding="UTF-8"?>
  2. <beansxmlns="http://www.springframework.org/schema/beans"
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:p="http://www.springframework.org/schema/p"
  4. xmlns:context="http://www.springframework.org/schema/context"
  5. xmlns:mvc="http://www.springframework.org/schema/mvc"
  6. xsi:schemaLocation="
  7. http://www.springframework.org/schema/beans
  8. http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
  9. http://www.springframework.org/schema/context
  10. http://www.springframework.org/schema/context/spring-context-3.0.xsd
  11. http://www.springframework.org/schema/mvc
  12. http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
  13. <!--开启注解扫描功能-->
  14. <context:component-scanbase-package="gd.hz.springmvc.controller"></context:component-scan>
  16. <!--将上面两个注解和并-->
  17. <mvc:annotation-driven/>
  19. <beanclass="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
  20. <propertyname="mediaTypes">
  21. <map>
  22. <entrykey="atom"value="application/atom+xml"/>
  23. <entrykey="html"value="text/html"/>
  24. <entrykey="json"value="application/json"/>
  25. </map>
  26. </property>
  27. <propertyname="viewResolvers">
  28. <list>
  29. <beanclass="org.springframework.web.servlet.view.BeanNameViewResolver"/>
  30. <beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver">
  31. <propertyname="viewClass"value="org.springframework.web.servlet.view.JstlView"></property>
  32. <propertyname="prefix"value="/"/>
  33. <propertyname="suffix"value=".jsp"/>
  34. </bean>
  35. </list>
  36. </property>
  37. <propertyname="defaultViews">
  38. <list>
  39. <beanclass="org.springframework.web.servlet.view.json.MappingJackson2JsonView"/>
  40. </list>
  41. </property>
  42. </bean>
  44. <!--声明DispatcherServlet不要拦截下面声明的目录-->
  45. <mvc:resourceslocation="/script/"mapping="/script/**"/>
  46. </beans>

这里我们声明的数据除text/html还有application/json和application/atom+xml.

先看一下我们的jsp页面json.jsp:

Python代码收藏代码
  1. <%@pagelanguage="java"contentType="text/html;charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <basehref="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
  7. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
  8. <scripttype="text/javascript"src="script/jquery-1.8.3.js"></script>
  9. <title>添加用户</title>
  10. <scripttype="text/javascript">
  11. $(function(){
  12. $("form:button").click(function(){
  13. $.ajax({
  14. type:"POST",
  15. url:"user/testJson",
  16. success:function(data){
  17. alert("名字:"+data.name+"年龄:"+data.age);
  18. }
  19. });
  20. });
  21. });
  22. </script>
  23. </head>
  24. <body>
  25. <formaction="user/addUser"method="post">
  26. 用户名:<inputtype="text"id="name"name="name"/><br/>
  27. 年龄:<inputtype="text"id="age"name="age"/>
  28. <inputtype="button"value="提交"/>
  29. </form>
  30. </body>
  31. </html>

向user/testJson发送请求.成功后显示返回数据.

看一下Controller

Java代码收藏代码
  1. packagegd.hz.springmvc.controller;
  3. importjava.util.HashMap;
  4. importjava.util.Map;
  6. importorg.springframework.stereotype.Controller;
  7. importorg.springframework.web.bind.annotation.RequestMapping;
  8. importorg.springframework.web.bind.annotation.ResponseBody;
  10. @Controller("userController")
  11. @RequestMapping("user")
  12. publicclassUserController{
  14. @RequestMapping("testJson")
  15. @ResponseBody
  16. publicMap<String,Object>testJson(){
  17. System.out.println("testJson");
  18. Map<String,Object>modelMap=newHashMap<String,Object>();
  19. modelMap.put("name","lfd");
  20. modelMap.put("age","20");
  21. returnmodelMap;
  22. }
  23. }

@ResponseBody 将内容或对象作为 HTTP 响应正文返回，使用@ResponseBody将会跳过视图处理部分，将返回值写入输出流。

这里我放入的是简单的数据类型,也可以是复杂对象.集合.在页面可以用循环获取

再看一下使用ajax发送和接收数据:

还先看一下我们的jsp页面json2.jsp:

Html代码收藏代码
  1. <%@pagelanguage="java"contentType="text/html;charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <%
  4. Stringpath=request.getContextPath();
  5. StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  6. %>
  7. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  8. <html>
  9. <head>
  10. <basehref="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
  11. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
  12. <scripttype="text/javascript"src="script/jquery-1.8.3.js"></script>
  13. <scripttype="text/javascript"src="script/jquery.json-2.4.js"></script>
  14. <title>添加用户</title>
  15. <scripttype="text/javascript">
  16. $(function(){
  17. $.fn.serializeObject=function(){
  18. varo={};
  19. vara=this.serializeArray();
  20. $.each(a,function(){
  21. if(o[this.name]){
  22. if(!o[this.name].push){
  23. o[this.name]=[o[this.name]];
  24. }
  25. o[this.name].push(this.value||'');
  26. }
  27. else{
  28. o[this.name]=this.value||'';
  29. }
  30. });
  31. returno;
  32. };
  34. $("#form:button").click(function(){
  35. varjsonuserinfo=$.toJSON($('#form').serializeObject());
  36. alert(jsonuserinfo);
  37. jQuery.ajax({
  38. type:'POST',
  39. contentType:'application/json',
  40. url:'user/testJson2',
  41. data:jsonuserinfo,
  42. dataType:'json',
  43. success:function(data){
  44. alert("名字:"+data.name+"年龄:"+data.age);
  45. },
  46. error:function(){
  47. alert("error");
  48. }
  49. });
  50. });
  51. });
  52. </script>
  53. </head>
  54. <body>
  55. <formaction="user/addUser"method="post"id="form">
  56. 用户名:<inputtype="text"id="name"name="name"/><br/>
  57. 年龄:<inputtype="text"id="age"name="age"/>
  58. <inputtype="button"value="提交"/>
  59. </form>
  60. </body>
  61. </html>

这里除了使用jquery-1.8.3.js外还使用了一个插件jquery.json-2.4.js,大家可以上网下载

它的简单用法:

Js代码收藏代码
  1. varthing={plugin:'jquery-json',version:2.4};
  3. varencoded=$.toJSON(thing);
  4. //'{"plugin":"jquery-json","version":2.4}'
  5. varname=$.evalJSON(encoded).plugin;
  6. //"jquery-json"
  7. varversion=$.evalJSON(encoded).version;

下面这个方法是将表单中的数据组成json格式.

Js代码收藏代码
  1. $.fn.serializeObject=function(){
  2. varo={};
  3. vara=this.serializeArray();
  4. $.each(a,function(){
  5. if(o[this.name]){
  6. if(!o[this.name].push){
  7. o[this.name]=[o[this.name]];
  8. }
  9. o[this.name].push(this.value||'');
  10. }
  11. else{
  12. o[this.name]=this.value||'';
  13. }
  14. });
  15. returno;
  16. };

Controller这边

Java代码收藏代码
  1. packagegd.hz.springmvc.controller;
  3. importgd.hz.springmvc.model.User;
  5. importjava.util.HashMap;
  6. importjava.util.Map;
  8. importorg.springframework.stereotype.Controller;
  9. importorg.springframework.web.bind.annotation.RequestBody;
  10. importorg.springframework.web.bind.annotation.RequestMapping;
  11. importorg.springframework.web.bind.annotation.ResponseBody;
  13. @Controller("userController")
  14. @RequestMapping("user")
  15. publicclassUserController{
  17. @RequestMapping("testJson2")
  18. @ResponseBody
  19. publicMap<String,Object>testJson2(@RequestBodyUseruser){
  20. System.out.println("testJson2");
  21. System.out.println(user.getName());
  22. System.out.println(user.getAge());
  23. Map<String,Object>modelMap=newHashMap<String,Object>();
  24. modelMap.put("name",user.getName());
  25. modelMap.put("age",user.getAge());
  26. returnmodelMap;
  27. }
  28. }

@RequestBody 将 HTTP 请求正文插入方法中,将请求体写入某个对象。

还是要注意,输入年龄时要是数值.祝大家测试成功.


分享到：
| Spring mvc系列八之 页面静态化(二)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics