利用 iframe解决ajax的跨域问题

问题

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=‘‘/> " +
        "<input type=‘hidden‘ name=‘password‘ value=‘‘/> " +
        "</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=\"../../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;
    }
时间: 2024-08-06 07:54:55

利用 iframe解决ajax的跨域问题的相关文章

js 利用iframe和location.hash跨域解决办法,java图片上传回调JS函数跨域

奶奶的:折腾了我二天,终于解决了!网上有很多例子. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 测试通过 js :这个主页面,部分代码, function submitUpload(id){ $("#imgSrc" + id +"").attr("alt", "图片上传中--"); var imgID = id; if(id>0){ imgID = 1; } var for

解决Ajax不能跨域的方法

1.  Ajax不能跨域请求的原因 同源策略(Same Origin Policy),是一种约定,该约定阻止当前脚本获取或者操作另一个域下的内容.所有支持Javascript的浏览器都支持同源策略,也就是说浏览器可以隔离来自不同源的内容,阻止跨域请求的发生. 2. 解决方法 (1) CORS 在被请求的脚本中使用header()函数设置http响应,从而使得跨域请求能够发生: header(“Access-Control-Allow-Origin:*”); 这一方法称为CORS(Cross-Or

js 利用iframe和location.hash跨域解决的方法,java图片上传回调JS函数跨域

奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, function submitUpload(id){ $("#imgSrc" + id +"").attr("alt", "图片上传中--"); var imgID = id; if(id>0){ imgID = 1; } var fo

cors解决ajax请求跨域问题

Access-Control-Allow-Origin: * 适用tomcat部署的项目 在web.xml里添加以下内容 <filter> <filter-name>CorsFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> </filter> <filter-mapping> <filter

jQuery中利用JSONP解决AJAX跨域问题

写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”.而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表: URL 说明 允许通信 http:/

AJAX及其跨域的主要解决方法

AJAX = Asynchronous JavaScript andXML(异步的 JavaScript 和 XML).通过在后台与服务器进行少量数据交换,使网页实现异步更新.要明白异步交互可以通过同步和异步的对比很容易明白: 同步交互,就是最常见的click-refresh模式,点一个连接或提交一个表单,然后就必须重载整个页面 异步交互,javascript根据返回的数据,不刷新页面而改变当前页面的显示,例如:新浪微博,百度地图. Ajax的异步交互从XMLHttpRequest这个对象开始,

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

利用jquery.ajax()实现跨域

通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端生成script tags至返回至客户端,也就是动态生成javascript标签,通过javascript callback的形式实现数据读取. 前端代码如下: $.ajax({ type:"get", async:false, url:"http://192.168.0.168:8080/lightview/filecent

AJAX的跨域与JSONP

AJAX的跨域与JSONP 什么是AJAX的跨域请求 出于安全的考虑,如果你要从www.a.com通过Ajax来请求另外一个网站www.b.com的内容,浏览器是不允许你这样做的(不理解这里的安全是指什么?想想如果没有这个限制的话,黑客可以做些什么).那什么样的情况下算是跨域?域名不同那当然算是跨域了,例如a.com向b.com发送请求,这当然就是跨域了,不允许的.不过子域名不同(例如sub.a.com向www.a.com发送请求)甚至是同域名不同端口(例如a.com:80向a.com:8080