• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >HBuilder教程 > mui web跨域问题如何解决?- mui.getJSONP()

mui web跨域问题如何解决?- mui.getJSONP()

作者:教程 字体:[增加 减小] 来源:互联网 时间:2017-05-31

本文主要包含mui.getjsonp,getjsonp,jquery getjsonp,mui ajax 跨域,mui ajax跨域请求等相关知识,教程希望在学习及工作中可以帮助到您

问题描述

许多开发者使用mui.ajax()在浏览器中调试时,控制台总会出现这样的错误信息:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
出现这种错误的原因在于浏览器的同源策略,使得本域脚本只能读写本域内的资源,而无法访问其它域的资源,造成了我们常说的“跨域”问题。

Web跨域访问的实现
浅谈WEB跨域的实现(前端向)
Web应用跨域访问解决方案汇总
网上有许多关于跨域问题的解决方案,这里知识提供两篇文章供大家参考。

JSON和JSONP
提起跨域实现,其实最容易想到的就是JSONP。这种技术方案已经非常流行,网上也有大量的资料供我们学习和参考。
说说JSON和JSONP,也许你会豁然开朗
jsonp详解
JSONP 的工作原理是什么?
JSONP 教程

mui.ajax()对跨域的支持
查看源码我们会发现mui.ajax()会根据运行环境的不同,而创建不同的XMLHttpRequest。
标准的HTML中的XHR是不能进行跨域访问的,而5+提供的XHR是可以实现的,但是普通浏览器环境是不支持5+API的。
如何判断Runtime是否支持5+ API

mui.getJSONP()
mui同样提供了JSONP的插件(mui.jsonp.js见附件)来实现Web跨域,方法为mui.getJSONP()。
该方法有三个参数:


  • url——请求发送的目标地址(String)

  • data——发送到服务器的业务数据(Object)

  • callback——请求回调函数(Function)



  •  
  •  

请求方式默认并始终是GET方式,因为JSONP实际是在客户端动态添加了个<script></script>然后将url指向要请求的地址,script是没有同源策略的。

示例
JS部分
需要引入mui.js以及mui.jsonp.js

var data = {
    name: 'xiaoming',
    code: '200'
};
mui.getJSONP('http://192.168.12.74/jsonp.php', {}, function(data) {
    console.log(data);
});

PHP部分

<?php
header('Content-type: application/json');
//获取回调函数名
$callbackName = $_GET["callback"];
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $callbackName."(" . $json_data . ")";
?>

mui.getJSONP()方法传递给服务器的回调函数的请求参数名在callback参数中。

最后附上源码,测试的时候记得更换下IP地址。

jsonp.zip

您可能想查找下面的文章:

  • mui web跨域问题如何解决?- mui.getJSONP()

相关文章

  • 2017-05-31PHP解决mui前端框架中的ajax请求跨域问题
  • 2017-05-31HBuilder mui打开多个子页面后快速回到首页的方法
  • 2017-05-31Android集成HTML5+SDK,Runtime方式离线打包,空项目讲解
  • 2017-05-31如何建立socket连接
  • 2017-05-31mui 在手机上打开pdf文件的方法
  • 2017-05-31Hbuilder MUI 滚动到页面顶部
  • 2017-05-31mui 打开新窗口的方式总结
  • 2017-05-31HBuilder 入门(5) / 编写一个登录页面 - Ajax交互
  • 2017-05-31mui uploader上传服务器端代分享(php版)
  • 2017-05-31HBuilder MUI 为textarea添加语音输入和清除的功能

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何监听webview侧滑关闭,监听页面关闭的瞬间
    • 用H5+开发的APP,其安全性如何?存不存在后门漏洞
    • HBuilder MUI 基于plus.downloader的图片懒加载功能,支持本地缓存
    • MUI 监听短信验证码并自动提交表单
    • Hbuilder MUI push教程
    • HBuilder 适合做什么
    • mui android native.js获取手机MAC地址
    • mui关闭其它页面,首页以及当前窗口对象不关闭
    • HBuilder mui webview模式选项卡实现滑动切换
    • Hbuilder mui微信支付一些问题总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有