【解决】JS跨域操作解决方案
今天在做注册表单时碰到的问题:两个域名下的相同表单都需提交到同台服务器中的数据库存储。
组好数据,AJAX POST提交过去后没有任何数据返回,Firfox的XHR虽然返回200 OK,但POST地址却红色高亮,Chrome直接forbidden了。于是知道了,跨域操作被阻止了(浏览器的安全策略)。
赶着下班的点弄完,所以用了最简单的跨域方法:JQ的$.getScript方法(原生JS中可以创建Script标签加载请求地址 var JSONP = document.createElement("script"))。
方案初稿:
HTML页面:function showError(){//回调函数 if(msg=="success"){ alert("申请提交成功!"); }else if(msg=="Register Aready!"){ alert("您已经提交过申请!"); }else{ alert("Sorry,提交失败,请刷新页面后重新提交!"); } } var params=$.param({name:name,mobile:mobile,email:email});//组装数据 $.getScript('http://www.exampe.com/register.php?jsonp=true&'+params,showError);
PHP页面:
$jsonp=$_REQUEST['jsonp']; //some handle if(...){ echo ($jsonp==true)?'msg="Register Aready!"':'Register Aready!'; return false; }else if(...){ echo ($jsonp==true)?'msg="success"':"success"; return true; }else{ echo ($jsonp==true)?'msg="error"':"error"; return false; }
在$.getScript 后执行了PHP页面返回的数据,声明了一个全局变量msg,然后回调函数就可以使用这个全局变量了。
方案修改稿:
HTML页面:
function showError(msg){//回调函数 if(msg=="success"){ alert("申请提交成功!"); }else if(msg=="Register Aready!"){ alert("您已经提交过申请!"); }else{ alert("Sorry,提交失败,请刷新重试!"); } } var params=$.param({name:name,mobile:mobile,email:email});//组装数据 $.getScript('http://www.exampe.com/register.php?jsonp=true&'+params+'&callback=showError');
PHP页面:
//some handle if(...){ $status='success'; $notice='操作成功'; }else{ $status='error'; $notice='操作失败'; } $jsondata = '{status:'.$status.', notice:'.$notice.'}'; echo $_REQUEST['callback'].'('.$jsondata.')'; return;这样$.getScript后就直接自动传参调用回调函数,而不是创建一个全局变量后再调用了,相比比前一种方法灵活高效。
JS跨域方案还有很多种,这应该是最简单的了。其它方案请参考以下链接,不敷述。
【参考】:
利用JSONP解决AJAX跨域问题的原理与jQuery解决方案
阅读本文后,您的心情是:
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注