JavaScript之跨域问题-tutorial js-php.cn

本篇文章给大家分享的内容是JavaScript之跨域问题，有着一定的参考价值，有需要的朋友可以参考一下

1jsonp

一般接口使用jsonp跨域，使用jquery的ajax指定dataType为jsonp即可

$.ajax({ async : true, url : "https://api.douban.com/v2/book/search", type : "GET", dataType : "jsonp", // 返回的数据类型，设置为JSONP方式 jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback jsonpCallback: 'handleResponse', //设置回调函数名 data : { q : "javascript", count : 1 }, success: function(response, status, xhr){ console.log('状态为：' + status + ',状态是：' + xhr.statusText); console.log(response); } }); Salin selepas log masuk jsonp支持跨域的原理：JSONP实现跨域请求的原理简单的说，就是动态创建 标签，然后利用 的src 不受同源策略约束来跨域获取数据。

其实就是下面的代码的实现方式：js脚本返回callback(data),页面中定义一个callback函数

开始上传 function callback(msg) { //回调函数 alert(msg); } $("#submitbtn").click(function() { var callbackurl = window.location.href.substring(0, window.location.href.lastIndexOf('/')) + "proxy.html"; //获取代理文件路径 $("#fileform").attr("action", "FileHandler.ashx?callbackurl=" + callbackurl); $("#fileform").submit(); }) Salin selepas log masuk 3H5的postMessage()方法，兼容性没那么好

详细见 https://www.cnblogs.com/dolphinX/p/3464056.html

上传图片代码，接口返回的数据就是postMessage的写法

Salin selepas log masuk $(document).ready(function() { $('#upload').click(function() { $("#imgFile")[0].click(); }); }); var queryToJson = function(url) { url = url.replace(/#.*/, ""); var query = url.substr(url.lastIndexOf('?') + 1); var params = query.split('&'); var result = {}; for (var i = 0; i < params.length; i++) { var t = params[i].split("="); if (!t[0]) continue; result[decodeURIComponent(t[0])] = decodeURIComponent(t[1] || ""); } return result; }; $('[name=name]').val(queryToJson(window.location.href).name); $('[name=hobby]').val(queryToJson(window.location.href).hobby); //判断照片大小 function getPhotoSize(obj) { photoExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); //只支持jpg,png if (photoExt != '.jpg' && photoExt != '.png') { showMsg("请上传正确的图片格式，如JPEG、PNG"); return false; } var fileSize = 0; fileSize = obj.files[0].size; fileSize = Math.round(fileSize / 1024); //单位为KB if (fileSize >= 10000) { showMsg("建议上传图片不超过10M"); return false; } //跳转到过渡页，请求上传接口,将接口返回插入结果页src $('#page2').addClass('hide'); $('#imgFile').addClass('hide'); $('#fileinfo').submit(); $('#loading').removeClass('hide'); getMsg(); } //获取返回数据 function getMsg() { window.addEventListener('message', function(e) { $('#loading').addClass('hide'); if (e.source != window.parent) return; if (e.data.code == 'A00000') { $('#imgSrc')[0].src = e.data.data.url; $('#msg').html(e.data.data.message); $('#page5').removeClass('hide'); } else { location.href = '/anotherTry.html'; } }, false); } //显示提示信息 function showMsg(msg) { var _this = this; $('#msgTip').html(msg); $('#msgTip').removeClass('hide'); window.setTimeout(function() { $('#msgTip').addClass('hide'); }, 3000); } //再试一次 function tryAgain() { $('#fileinfo').submit(); $('#page5').addClass('hide'); //看不到加载页面，页面闪 $('#loading').removeClass('hide'); getMsg(); } Salin selepas log masuk

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

JavaScript之跨域问题