一、jsonp,使用jquery封装的$.ajax,返回数据类型要设置为jsonp

示例:

$.ajax({
type: 'get',
contentType: "application/json; charset=utf-8",
url: "http://localhost:8080/aqi/getCityList.php",
dataType: 'jsonp',
< /span>
jsonp: "callback",/ / 传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为: callback)
jsonpCallback: "success_jsonpCallback", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名</span>
success: function(json) {
getCityListSuccess(json);
},
error: function(data, textStatus, errorThrown) {
console.log("error" + ' ' + JSON.stringify(data) + textStatus + errorThrown);
}
});或者使用
$.getJson, 在调用的url添加 & callback = ? $.getJSON("http://localhost:8080/aqi/getDetailsByTimepointAndCityId.php?callback=?", {
"time_point": time_point,
"city_id": city_id
}, function(json) {
$('#radar-dialog').css("display", "block");
$('#radar-dialog').dialog({
title: radar_cityname + "市," + timepoint,
width: 350,
});
formatRadarData(json);
});

PHP端的代码为:

<?php
header("Content-Type: text/html;charset=utf-8");
$db_name="aqidata.db";
$conn = new sqlite3($db_name);
$callback = $_GET['callback'];
$resultarray=array();
$sql = "select * from 'city' where 1=1 order by id";
$result = $conn->query($sql);
$i=0;
while ($row = $result->fetchArray(SQLITE3_ASSOC)) {
$resultarray[$i]=$row;
$i++;
}
echo $callback.'('.json_encode($resultarray).')';
?>

注意:1、ajax中要指定jsonp参数,然后后端要把回调函数名称写入到返回值中。

我参考的博文是:http://www.cnblogs.com/xcxc/p/3729660.html

二、用CORS(Cross-Origin Resource Sharing),这个官方草案。

就是在后端代码(php)加入:

header("Access-Control-Allow-Origin:*");

jsonp和CORS跨域实现的更多相关文章

  1. jsonp与cors跨域的一些理解

    浏览器的同源策略,即是浏览器之间要隔离不同域的内容,禁止互相操作. 比如,当你打开了多个网站,如果允许多个网站之间互相操作,那么其中一个木马网站就可以通过这种互相操作进行一系列的非法行为,获取你在各个 ...

  2. jsonp与cors跨域的一些理解(转)

    CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...

  3. 4 伪ajax:jsonp、cors 跨域请求

    一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...

  4. django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享

    一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...

  5. 跨域漏洞丨JSONP和CORS跨域资源共享

    进入正文之前,我们先来解决个小问题,什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 跨域常见的两种方式,分别是JSONP和CORS. 今天i ...

  6. 图片ping、JSONP和CORS跨域

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<由外边距合并到BFC> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临时会话 ...

  7. 使Asp.net WebApi支持JSONP和Cors跨域访问

    1.服务端处理 同源策略(Same Origin Policy)的存在导致了“源”自A的脚本只能操作“同源”页面的DOM,“跨源”操作来源于B的页面将会被拒绝.同源策略以及跨域资源共享在大部分情况下针 ...

  8. jsonp与cors跨域解析

    1.浏览器的同源安全策略 没错,就是这家伙干的,浏览器只允许请求当前域的资源,而对其他域的资源表示不信任.那怎么才算跨域呢? 请求协议http,https的不同 域domain的不同 端口port的不 ...

  9. JSONP跨域和CORS跨域

    什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这 ...

随机推荐

  1. 编译安装redis-5.0.4

    编译安装为redis官方推荐安装方式. 本例中使用linux版本为:CentOS Linux release 7.0.1406 (Core),Basic Web Server 一.安装依赖包 yum ...

  2. 多线程手写Future模式

    future模式 在进行耗时操作的时候,线程直接阻塞,我们需要优化这样的代码,让他再启动一个线程,不阻塞.可以执行下面的代码. 这个时候我们就用到了未来者模式 future设计类 只有一个方法 pub ...

  3. scala的多种集合的使用(7)之集Set的操作方法

    1.给集添加元素 1)用+=.++=和add给可变集添加元素. scala> var set = scala.collection.mutable.Set[Int]() set: scala.c ...

  4. jdk8中的stream

    https://www.ibm.com/developerworks/cn/java/j-lo-java8streamapi/ Java 8 中的 Streams API 详解 Streams 的背景 ...

  5. MySQL大小写敏感

    MySQL大小写敏感说明 - TonyWu - 博客园https://www.cnblogs.com/wzmenjoy/p/4244545.html

  6. css浮动学习

    以前网页中的局都是使用浮动来实现的(毕竟ie9也不支持flex-box).而浮动在css中是一个挺难理解的概念,这次再巩固一下,float的具体使用事项. 1.行内元素和块元素的区别? 行内元素(im ...

  7. C# NetStream

    标题:NetStream 关注点:Read.Write 正文: int size = Read(buf, 0, buf.length); 这里一次会读入length个字节,如果小于这个数量,后面的就是 ...

  8. 《Python从入门基础到实践》

    <Python学习——从入门到实践> 第1章 Python语言概述 1.1 从计算机到编程 1.1.1 程序语言的演变:机器语言,汇编语言,高级语言 1.1.1.1 演变原因 1.1.1. ...

  9. BZOJ5019[Snoi2017]遗失的答案——FWT+状压DP

    题目描述 小皮球在计算出答案之后,买了一堆皮肤,他心里很开心,但是一不小心,就忘记自己买了哪些皮肤了.==|||万 幸的是,他还记得他把所有皮肤按照1-N来编号,他买来的那些皮肤的编号(他至少买了一款 ...

  10. ELK日志系统:Elasticsearch+Logstash+Kibana+Filebeat搭建教程

    ELK日志系统:Elasticsearch + Logstash + Kibana 搭建教程 系统架构 安装配置JDK环境 JDK安装(不能安装JRE) JDK下载地址:http://www.orac ...