jquery的ajax与spring mvc对接注意事项

昨天一直纠结这么一个问题,应用场景是这样的:

这里登陆是通过jquery的ajax传输数据到后台controller类相应的映射mapping接收。本来是想,在后台验证成功之后返回一个视图modelAndView。但是却不曾想到有这么一个问题,就是不管你怎么返回,前台就是不跳转页面。这里牵扯到一个很重要的问题。先来看看我前端ajax发送登陆请求的代码:

<script type="text/javascript">
        $(function() {
            $(‘#submitLogin‘).click(function() {
                $.ajax({
                    type:"POST",
                    url:"/user/checkLogin",
                    dataType: "json",
                    data: $("#loginform").serialize(),
                    success:function(data,status){
                        alert("成功"+data);
                    },
                    error:function () {
                        alert("失败");
                    }
                });
            });
        });
    </script>

再来看一个不推荐的后台示例:(错误的原因)

@RequestMapping(value = "/checkLogin",method = RequestMethod.POST)
    public @ResponseBody  ModelAndView userLogin(TUserLoginVo tUserLoginVo, HttpServletRequest request,HttpServletResponse response){
        HttpSession session=request.getSession();
        String code= (String) session.getAttribute("code");
        System.out.println("---"+session.getAttribute("code"));
        ModelAndView mv=new ModelAndView();
        if(code.equals(tUserLoginVo.getCheckcode())){
            TUser tUser=staffService.finUser(tUserLoginVo.getUsername(),tUserLoginVo.getPassword());
            if(tUser!=null){
                mv.setViewName("redirect:/pages/test.html");
                System.out.println("---"+tUser.getUsername());
                return mv;
            }
        }
        mv.setViewName("redirect:/pages/LoginPage.html");
        return mv;

    }

上面直接返回一个视图,但是前台就是没看到跳转,而且直接执行了error的方法,问题是明明后台代码已经执行了啊。

下面先来解释一下jquery ajax代码里面都扮演了什么角色!

type:"POST",表示通过post请求。
url:"/user/checkLogin",表示请求映射在controller里面的方法前的地址(例如: @RequestMapping(value = "/checkLogin",method = RequestMethod.POST))
dataType: "json",这个很重要,这是直接表面我期望的后台给我返回一个json类型的数据,如果不是,则会直接执行error的方法。下面在分析一个通常不设置的属性:
contentType:"application/json",这是表明我们前台传过去的是json类型的数据,因此需要将我们的数据提前通过 JSON.stringify(a);将数据a变成json类型,当然并不是什么都能变成json类型的,希望记住!接下来
data: $("#loginform").serialize(),这是一个非常快捷的方法,可以将表单中的值直接取出来,拿上面的例子,生成的格式是这样的:
通过这种方式,后台也可以直接用对象来接收,至于它内部怎么组装成对象的,与表单中的name属性有关,一定要切记,表单中,没有后台需要的数据的标签中千万别嵌套name属性。同时name属性的值一定要对应我们PO对象中的字段值!例如我的一个PO类:
    private String username;
    private String password;
    private String checkcode;

那些getter和setter方法我就不摆出来了

它必须对应html表单中:

如果发生不一致,后台接收就会报不支持的错误!

为了迎合 dataType: "json",这一要求,后台一定要在方法返回值前面加上 @ResponseBody  :

public @ResponseBody  Object userLogin(){
*****
}

以上是一个注意点,现在来另外一个!

也是之前提到的,json数据类型,后台返回的json数据类型,虽然我们加了@ResponseBody,但这个千万记住,这个是可以将对象、集合等类型转换为json类型,但是有时候我们需要返回一个字符串怎么办,那对不起,@ResponseBody无法帮助我们转换成json类型,而且也不会报错,只是前台会只执行error的方法,因为我们设置了dataType: "json"

通常情况下,是这样设置成json的,所以我们要返回一个字符串最好是另辟蹊径(当然dataType: "json"里面的json也可以改成text等,但是没这个必要)

我是这一解决的,直接对比代码的返回值吧(自己组装的一个json格式的字符串)

@RequestMapping(value = "/checkLogin",method = RequestMethod.POST)
    public @ResponseBody  Object userLogin(TUserLoginVo tUserLoginVo, HttpServletRequest request,HttpServletResponse response){
        HttpSession session=request.getSession();
        String code= (String) session.getAttribute("code");
        System.out.println("---"+session.getAttribute("code"));
        if(code.equals(tUserLoginVo.getCheckcode())){
            TUser tUser=staffService.finUser(tUserLoginVo.getUsername(),tUserLoginVo.getPassword());
            if(tUser!=null){
                System.out.println("---"+tUser.getUsername());
                return  "{\"LoginOK\":\"LoginOK\"}";
            }
        }
        return "{\"LoginError\":\"LoginError\"}";

    }

问题解决了,前台执行了success的方法!

当然,上面的方法也不好,那怎么办,我们需要的是json,但又无法转得了。

可以这一,给一个通用方法:

package com.liyong.bos.utils;

import java.io.Serializable;
import java.util.List;

public class JsonResult<T, K> implements Serializable {
    private boolean result;
    private String msg;
    private List<T> dataList;
    private K data;
    private T dataObje;
    public K getData() {
        return data;
    }

    public void setData(K data) {
        this.data = data;
    }

    public List<T> getDataList() {
        return dataList;
    }

    public void setDataList(List<T> dataList) {
        this.dataList = dataList;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }
    public boolean isResult() {
        return result;
    }

    public void setResult(boolean result) {
        this.result = result;
    }

    public T getDataObje() {
        return dataObje;
    }

    public void setDataObje(T dataObje) {
        this.dataObje = dataObje;
    }
}

把我们需要的数据封装到jsonResult对象中即可,然后返回值是JsonResult就行。具体功能请看代码。

时间: 2024-10-20 16:50:24

jquery的ajax与spring mvc对接注意事项的相关文章

[源码]Bootstrap、jQuery、HTML5、Spring MVC、Mybatis、Hibernate、安全权限、高性能、高并发

功能特点: 1.适配所有设备(PC.平板.手机等),兼容所有浏览器(Chrome.Firefox.Opera.Safari.IE等),适用所有项目(MIS管理信息系统.OA办公系统.ERP企业资源规划系统.CRM客户关系管理系统.网站.管理后台等). 2.快速开发,敏捷的数据持久层解决方案. 2.1.事务自动处理. 2.2.O/R Mapping基于注解,零配置XML,便于维护,学习成本低. 2.3.接口和实现分离,不需写数据持久层代码,只需写接口,自动生成添加.修改.删除.排序.分页.各种条件

Bootstrap、jQuery、HTML5、Spring MVC、Mybatis、Hibernate、安全权限

功能特点: 1.适配所有设备(PC.平板.手机等),兼容所有浏览器(Chrome.Firefox.Opera.Safari.IE等),适用所有项目(MIS管理信息系统.OA办公系统.ERP企业资源规划系统.CRM客户关系管理系统.网站.管理后台等). 2.快速开发,敏捷的数据持久层解决方案. 2.1.事务自动处理. 2.2.O/R Mapping基于注解,零配置XML,便于维护,学习成本低. 2.3.接口和实现分离,不需写数据持久层代码,只需写接口,自动生成添加.修改.删除.排序.分页.各种条件

AJAX与spring mvc交互

(1)简单交互: <table style="width: 100%" class="table" cellspacing="1" cellpadding="1" border="0">   <tr><td  class="ti1"  colSpan="2">请选择审讯室</td></tr>   <tr

Java+Bootstrap、jQuery、HTML5、Spring MVC、Hibernate高性能

A.快速开发.框架的数据持久层将添加.修改.删除.排序.分页.各种条件的查询封装成通用模块,不用手写SQL.       B.Spring Security安全权限管理,认证和授权.不仅可管理各个功能模块的权限,也可管理功能模块里的页面按钮权限. JavaEE企业开发框架,简称JEEFW[JavaEE Framework],是我们软件组为了快速开发各种B/S产品,花费几个月而开发的企业开发框架.该框架经过测试组的测试,已应用到多个项目. JavaEE企业开发框架前端采用最受欢迎的HTML.CSS

Ajax分页 Spring MVC + Hibernate

效果图: 1.  添加公共类.方法.代码 1.    分页类:Page.java package cn.com.aperfect.sso.base.dao; import java.util.ArrayList; import java.util.List; public class Page<T> { // 当前页数 private int currentPage; // 记录偏移量 private int offset; // 总页数 private int totalsPage; //

[Java Web – 3A] – Spring MVC开发注意事项

1.使用Maven构建项目 2.SpringMVC 绝对路径的问题 首先要明确一点,在html中,资源文件也是有自己的URL,即href中是支持绝对路径.如下代码: <link href="<%=request.getContextPath() %>/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 用浏览器打开后 <link href=&

Spring MVC 4.2.2 中最好的集成静态资源的方法

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. Spring MVC 4.2.2 – Best way to Add/Integrate JS, CSS and images into JSP

jQuery中Ajax+Spring MVC实现跨域请求

项目开发中,某个可独立.也可集成的子业务模块须要向外开放相关API接口,先说下项目本身使用了jersery来实现RESTful webservice以名词形式公布API.有意思的是在实际的操作中同事却通过Ajax跨域请求的方式去调用该API,先不说成功与否,这样的方式本就是"滑稽"的.和他一起探讨了此种做法的不合理性,之后选择jersey client的方式进行远程调用.只是他在跨域请求中遇到了问题,自己闲暇时间予以解决,这才是此篇文章的由来. jQuery对跨域请求有两种解决方式各自

Spring MVC Controller与jquery ajax请求处理json

在用 spring mvc 写应用的时候发现jquery传递的[json数组对象]参数后台接收不到,多订单的处理,ajax请求: var cmd = {orders:[{"storeId":"0a1", "address":"西斗门路2号", "goods":[{"goodsId":"1"}, {"goodsId":"2"},