利用 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;
}
利用 iframe解决ajax的跨域问题的更多相关文章
- 解决Ajax不能跨域的方法
1. Ajax不能跨域请求的原因 同源策略(Same Origin Policy),是一种约定,该约定阻止当前脚本获取或者操作另一个域下的内容.所有支持Javascript的浏览器都支持同源策略,也 ...
- 利用jquery的ajax实现跨域,内部其实是jsonp协议了,不是XHRhttp协议
一.同源策略 要理解跨域,先要了解一下“同源策略”.所谓同源是指,域名,协议,端口相同.所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西. 一些常见的是否同源示例可参照下表: 在 ...
- 解决ajax请求跨域
跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足 才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法 方法一 // ajax请求跨域 /* *解决a ...
- 解决Ajax请求跨域问题
from:https://blog.csdn.net/wang379275614/article/details/53333775 上篇文章提到,由于浏览器的同源策略,使得,AJAX请求只能发给同源的 ...
- web api 解决Ajax请求跨域问题
前端ajax请求接口时,经常出现跨域问题,当然了解决方法有很多种,比如: http://www.jb51.net/article/68424.htm 我本人恰好前后端都会一点,所以直接在接口端处理. ...
- leyou_03_cors解决ajax的跨域请求问题
1.为什么会有跨域问题 因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击. 因此:跨域问题 是针对ajax的一种限制 ...
- nginx配置 解决ajax请求跨域问题
文章来源:http://to-u.xyz/2016/06/30/nginx-cors/ 背景描述 最近在研究RESTful API接口设计,使用的是Nginx,要实现本地http://127.0.0. ...
- js 利用iframe和location.hash跨域解决的方法,java图片上传回调JS函数跨域
奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图 上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...
- 解决AJAX session跨域失效
1.想实现的功能是登录时有个验证码,这个验证码后台提供,然后放在session中,前台把用户输入的验证码通过AJAX发给后台,后台把session中的验证码取出来然后比较不同,一样则通过. 问题出现在 ...
随机推荐
- Observer pattern 观察者模式
一.认识观察者模式 我们看看报纸和杂志的订阅是怎么回事: 1.报社的业务就是出版报纸. 2.向某家报社订阅报纸,只要他们有新的报纸出版,就会给你送来,只要你是他们的订户,你就会一直收到报纸. 3.当你 ...
- SQL Server中的日期格式化
SQL Server中文版的默认的日期字段datetime格式是yyyy-mm-dd Thh:mm:ss.mmm 例如: select getdate() 2004-09-12 11:06:08 ...
- 【图像处理】【SEED-VPM】3.外设信息
———————————————————————————————————————————————————————————————————————— 摄像头接口 具有AV端子输出的彩色摄像头,摄像头广角8 ...
- Java深度历险(五)——Java泛型
作者 成富 发布于 2011年3月3日 | 注意:QCon全球软件开发大会(北京)2016年4月21-23日,了解更多详情!17 讨论 分享到:微博微信FacebookTwitter有道云笔记邮件 ...
- map 取值
1>可以取出Map中所有的键所在的Set集合:再通过Set的迭代器获取到每一个键,之后再用get();方法获得对应的值. public static void main(String[] arg ...
- 超强、超详细Redis数据库入门教程
这篇文章主要介绍了超强.超详细Redis入门教程,本文详细介绍了Redis数据库各个方面的知识,需要的朋友可以参考下 [本教程目录] 1.redis是什么2.redis的作者何许人也3.谁在使用red ...
- win10 Unistack 服务组 占用资源如何解决
开始菜单>设置>隐私,隐私界面的左侧栏目,找最后一个“后台应用”,把后台运行的应用全部关掉即可
- 浅谈c语言的指针
对于非计算机专业的同学,c语言的指针往往就是老师的一句“指针不考“就带过了.c语言的指针号称是c语言的灵魂,是c语言中最精妙的部分. 指针本质上也是变量,也就是一段内存,只是他的特殊之处是他存储的数据 ...
- AngularJs的UI组件ui-Bootstrap分享(十二)——Rating
Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...
- 整合了一个功能强大完善的OA系统源码,php全开源 界面漂亮美观
整合了一个功能强大完善的OA系统源码,php全开源界面漂亮美观.需要的同学联系Q:930948049