zoukankan      html  css  js  c++  java
  • ajax跨域

      因工作需求,需要给一个移动端写一个登录验证。具体需求:由移动端访问java项目并传递相应的参数,项目后台接收参数并进行查询判断,然后返回给移动端,从而是移动端完成登录。

      解决步骤一,首先要在java项目中编写一个免登陆的方法,java项目正常都会有登录验证,想要访问项目中的某个方法时,均需要先进行登录,有个过滤器可以控制。我的登录验证方法如下:

      

    /**
         * @param p
         * @throws Throwable
         */
        @Around("allMethod()")
        public Object apple(ProceedingJoinPoint p) throws Throwable {    
            /** 初始化参数 */
            InitArgs(p);
            if(map!=null&&request!=null){
                map.put("cpage", Common.isEmpty(request.getParameter("cpage"))?1:request.getParameter("cpage"));
            }
            boolean isReturnMAV = p.getSignature().toLongString().contains("org.springframework.web.servlet.ModelAndView");
            boolean isAjax = methodName.startsWith("aj_");
            boolean video = methodName.equals("video");
            Map<String, Object> paramMap = new HashMap<String, Object>();
            /** 验证登录 */
            LoginUser loginUser = (LoginUser)session.getAttribute(Constant.SS_LOGIN_USER);
        //当用户为空 并且isNeedValidLogin这个方法为true的时候才能走以下方法
    if(loginUser == null && isNeedValidLogin(className, methodName)){ if(!isAjax){ if(video){ HttpSession session2 = request.getSession(); int id = Integer.parseInt(request.getParameter("id")); int equId = Integer.parseInt(request.getParameter("equId")); Equ equ = equManager.doGet(Equ.class, equId); List<Media> mlist = mediaManager.getListByequId(equId,1L); Media media = mediaManager.getById(id,1L); session2.setAttribute("melist",mlist); session2.setAttribute("mlist",media); session2.setAttribute("equ",equ); return "/equ/video3"; } return isReturnMAV ? new ModelAndView("redirect:/system/logout.htm") : "redirect:/system/logout.htm"; }else{ ControllerBase.responseJSONWrite(response, Common.JsonStrResult(-901, "会话超时!请重新登录! ", "")); } } /** LoginUser */ paramMap.put("LoginUser", loginUser); paramMap.put("SYS_MENU_MAP", session.getAttribute("Meau")); if(SystemController.class.toString().contains(className) && !",aj_setting,dialog_set_wgt,home,index,".contains(","+methodName+",")){ if(loginUser != null && loginUser.IS_WGT && (loginUser.GROUP_ID == null || loginUser.WTIME_ID == null)){ if(!isAjax){ Object result = p.proceed(); return result; }else{ ControllerBase.responseJSONWrite(response, Common.JsonStrResult(-903, "请求超时! ", "")); } } } try { //执行方法 Object result = p.proceed(); //获取页面样式标记 Object cssTip = RequestUtil.getSessionAttr(session, Constant.SS_PAGE_CSS); if(cssTip == null){ RequestUtil.setSessionAttr(session, Constant.SS_PAGE_CSS, "mcss/baitian.css"); } if(result != null && !result.toString().contains("redirect:")){ if(map!=null&&request!=null){ map.put("cpage", Common.isEmpty(request.getParameter("cpage"))?1:request.getParameter("cpage")); } paramMap.put("PAGE_TITLE", Constant.PAGE_TITLE); /*if(request!=null){ paramMap.put("PATH_", request.getContextPath()); }*/ //paramMap.put("REQ_URI", request.getRequestURI()); if(loginUser != null){ //System.out.println(loginUser.UNAME); //map.put("M_MENU_AUTH", ","+loginUser.MENU_AUTH+","); paramMap.put("M_ACTION_AUTH", Common.Base64EncodeStr(","+loginUser.ACTION_AUTH+",")); //paramMap.put("SYS_MENU_MAP", GlobalUtil.SysMenuMap); //paramMap.put("SYS_MENU_MAP", session.getAttribute("Meau")); paramMap.put("SYS_MENU_MAP_", GlobalUtil.SysMenuMap_); /** 记录处理用户当前正在操作的菜单ID,涉及菜单选中、当前位置 */ /*InitMenu_(paramMap);*/ } } //获取args_参数 并放入map if(request!=null){ String args_ = RequestUtil.getStringParam(request, "args_", ""); if(!"".equals(args_)){ paramMap.put("args_", args_); } if(map != null){ map.putAll(paramMap); }else{ for (Iterator<String> keys = paramMap.keySet().iterator(); keys.hasNext();) { String key = keys.next(); request.setAttribute(key, paramMap.get(key)); } } } return result; } catch (Exception ex) { ex.printStackTrace(); if(!isAjax){ String exceptUrl_ = "redirect:/system/except.htm?id_="; return isReturnMAV ? new ModelAndView(exceptUrl_) : exceptUrl_; }else{ ControllerBase.responseJSONWrite(response, Common.JsonStrResult(-902, "操作失败! 异常:"+ex.getMessage(), ex.getMessage())); } } return null; } /** * 后台-- 是否需要验证 登录 * @param className * @param methodName * @return */ private static boolean isNeedValidLogin(String className, String methodName){ if(SystemController.class.toString().contains(className)){
          //当满足以下条件的时候isNeedValidLogin()方法为false,aj_mbUser此方法即移动端访问项目的方法
    if(",gologin,dologin,logout,except,aj_mbUser,".contains(","+methodName+",")){ return false; } } if(MyHandlerExceptionResolver.class.toString().contains(className)){ return false; } if(MediaController.class.toString().contains(className)){ if(",doTime1,".contains(","+methodName+",")){ return false; } } return true; }

      步骤二:以上是为了实现当移动端访问项目时的免登陆功能,以下为移动端访问项目的方法。以为,移动端访问java项目,属于跨域访问,所以添加了ResponseBody属性

    @RequestMapping("/sysuser/aj_mbuser.htm")
        @ResponseBody
        public String aj_mbUser(HttpServletRequest request,HttpServletResponse response,
                String callback,String userName,String passWord,ModelMap model) throws Exception{
            
            TSysUser user = sysUserManager.getSysUserByLogin(userName, passWord);
            String result = "false";
    
            if(user!=null&&user.getId()>0){
                 result = "{'isOk':'true'}";
                
            }else{
                 result = "{'isOk':'false'}";
            }
            result = callback+"("+result+")";
            return result;
    
        }

      步骤三:页面中的方法如下,dataType切记,是jsonp格式,不是jeson格式,并且jsonp属性后边是callback。

    function submitForm(){
                var uname=$("#uname").val();
                var upass=$("#upass").val();
                var url="http://211.103.196.218:8083/yyhspx/sysuser/aj_mbuser.htm";
                $.ajax({
                    type: "POST",//请求方式
                    url: url,
                    dataType: "jsonp",
                    jsonp: "callback",
                    data: {
                        "userName": uname,
                        "passWord": upass
                    },
                    success : function(data) {
                        if(data.isOk=='true'){
                            window.location.href="index.html";
                        }else{
                            alert("用户名或者密码错误");
                        }
                },
                    error : function() {
                    alert("用户名或者密码错误");
            }
        });
    <input type="text" name="" class="userName" placeholder="admin" id="uname">
            <input type="password" name="" class="passWord"  value="admin" id="upass">
            <input type="button" name="" onclick="submitForm()" class="subBut" value="登录">

     对于json和jsonp的区别,来自另外一个博客,地址:http://www.cnblogs.com/sunxucool/p/3433992.html 

    json格式:
    {
        "message":"获取成功",
        "state":"1",
        "result":{"name":"工作组1","id":1,"description":"11"}
    }
    jsonp格式:
    callback({
        "message":"获取成功",
        "state":"1",
        "result":{"name":"工作组1","id":1,"description":"11"}
    })

    看出来区别了吧,在url中callback传到后台的参数是神马callback就是神马,jsonp比json外面有多了一层,callback()。这样就知道怎么处理它了。于是修改后台代码。

    后台java代码最终如下:

    复制代码
    @RequestMapping(value = "/getGroupById")
      public String getGroupById(@RequestParam("id") Long id,
          HttpServletRequest request, HttpServletResponse response)
          throws IOException {
        String callback = request.getParameter("callback");
        ReturnObject result = null;
        Group group = null;
        try {
          group = groupService.getGroupById(id);
          result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
        } catch (BusinessException e) {
          e.printStackTrace();
          result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
        }
        String json = JsonConverter.bean2Json(result);
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        out.print(callback + "(" + json + ")");
        return null;
      }
    复制代码

    注意这里需要先将查询结果转换我json格式,然后用参数callback在json外面再套一层,就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。

    追求永无止境,在google的过程中,无意中发现了一个专门用来解决跨域问题的jQuery插件-jquery-jsonp

    有第一种方式的基础,使用jsonp插件也就比较简单了,server端代码无需任何改动。

    来看一下如何使用jquery-jsonp插件解决跨域问题吧。

    复制代码
    var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
        +"?id=1&callback=?";
    $.jsonp({
      "url": url,
      "success": function(data) {
        $("#current-group").text("当前工作组:"+data.result.name);
      },
      "error": function(d,msg) {
        alert("Could not find user "+msg);
      }
    });
    复制代码

    至此两种解决跨域问题的方式就全部介绍完毕。

  • 相关阅读:
    fibnacci数列(斐波那契数列)在python中实现
    《信息安全专业导论》第5周学习总结
    自我介绍
    python模拟进程状态
    俄罗斯方块游戏
    小学四则运算编程实践
    熟悉编程语言
    第六周学习总结
    第五周学习总结
    20201318第四周总结
  • 原文地址:https://www.cnblogs.com/qcq0703/p/7783273.html
Copyright © 2011-2022 走看看