首页 > 代码库 > 利用 iframe解决ajax的跨域问题

利用 iframe解决ajax的跨域问题

2024-08-22 07:02:50   222人阅读

问题

技术分享

 

1. form提交或a标签跳转方式提交不会引发跨域问题。

2. ajax出于安全问题就有了跨域问题，因为一次请求中既访问了外部域最后返回了自己的域。

3. 用iframe其实就是想仿照ajax的效果，把form请求提交到iframe里就不会将当前页面跳转，到后台处理业务访问其他域的资源，然后往页面回写JavaScript脚本的方式返回信息。

前台 触发链接

<a class="weui_btn weui_btn_primary" id="toLoan">立即出借</a>

前台 脚本创建form和iframe 然后提交到后台

<script type="text/javascript">
    function smal_send(){
        var  user=$("#name").val();
        var  pwd=$("#pwd").val();
        //http://localhost/juhe/Managers/DB/kuayu.php  你需要提交数据所到的后台地址
        //method="post"则为post方式提交;method="get"则为get方式提交
        var form =$("<form action=‘../../riskAssessment/checkUserLoan/${bid.id}‘ method=‘post‘>" +
        "<input type=‘hidden‘ name=‘user_name‘ value=http://www.mamicode.com/‘‘/>" +
        "<input type=‘hidden‘ name=‘password‘ value=http://www.mamicode.com/‘‘/>" +
        "</form> ");
        $( "#SMAL" ).remove();//如果已存在iframe则将其移除
        $( "body").append("<iframe id=‘SMAL‘ name=‘SMAL‘ style=‘display: none‘></iframe>");//载入iframe
        (function(){
        $( "#SMAL" ).contents().find(‘body‘).html(form);//将form表单塞入iframe;
        $( "#SMAL" ).contents().find("form input[name=‘user_name‘]").val(user);//赋值给iframe中表单的文本框中
        $( "#SMAL" ).contents().find("form input[name=‘password‘]").val(pwd);//赋值给iframe中表单的文本框中
        $( "#SMAL" ).contents().find(‘form‘).submit();//提交数据
        }());
        }
        $(document).ready(function(){
                $("#toLoan").click(function(){
                       smal_send();//调用函数
                })
            })
    </script>

 

后台 业务逻辑是这样 没有用户信息，拦截器拦截去微信服务器获取openId（跨域），给用户后台登陆后返回到页面跳转的后台链接，走后台处理逻辑，返回处理信息结果。

 

/**
     * 校验用户是否激活借款身份
     * @param userId
     * @param request
     * @param response
     */
    @RequestMapping("checkUserLoan/{bidId}")
    public String checkUserLoan(HttpServletRequest request,HttpServletResponse response,@PathVariable long bidId){                
        // 当前登录用户
        Users currentUser = userService.currentUser(request);        
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out;
        if(currentUser.getBusinessPersonal() > 0){
            try {
                out = response.getWriter();
                out.print("<script>window.parent.location.href=http://www.mamicode.com/"../../pay/loan/"+bidId+"\"</script>  ");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }else{
            try {
                out = response.getWriter();
                out.print("<script>$(window.parent.document).find(\"#errorDialog2\").attr(\"style\",\"display:block;\");</script>");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return null;
    }

 

利用 iframe解决ajax的跨域问题


联系
我们