PHP AJAX JSONP实现跨域请求使用实例
在之前我写过“php返回json数据简单实例”,“php返回json数据中文显示的问题”和“在PHP语言中使用JSON和将json还原成数组”。有兴趣的童鞋可以看看
今天我写的是PHP AJAX JSONP使用的实例。不清楚jsonp是什么的请自己搜索
实例1
test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="jquery-1.5.2.min.js"></script>
<script src="ajax.js"></script>
</head> <body>
</body>
</html>
ajax.js
$.ajax({
type : "post",
url : "ajax.php",
dataType : "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
success : function(json){
alert('success');
},
error:function(){
alert('fail');
}
});
ajax.php
<?php $data = ".......";
$callback = $_GET['callback'];
echo $callback.'('.json_encode($data).')';
exit; ?>
jquery-1.5.2.min.js
自己上网下载
当使用jsonp时,使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
实例2
test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="jquery-1.5.2.min.js"></script>
<script src="ajax.js"></script>
</head> <body>
<form name="form">
<input type="text" name="sex">
<input type="text" name="age">
<input type="button" id="btn" value="button" />
</form>
</body>
</html>
ajax.js
$(document).ready(function(){
$("#btn").click(function(k) {
//...
var j = $("form").serializeArray();//序列化name/value
$.ajax({
type: 'GET', //这里用GET
url: 'ajax.php',
dataType: 'jsonp', //类型
data: j,
jsonp: 'callback', //jsonp回调参数,必需
async: false,
success: function(result) {//返回的json数据
alert(result.message); //回调输出
result = result || {};
if (result.msg=='err'){
alert(result.info);
}else if (result.msg=="ok"){
alert('提交成功');
}else{
alert('提交失败');
}
},
timeout: 3000
})
//...
});
});
ajax.php
<?php
$callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数,必需
$date = array("age"=>$_GET['age'], "message"=>$_GET['age']);
$date["msg"]="err";
$date["info"]="因人品问题,发送失败";
$tmp= json_encode($date); //json 数据
echo $callback . '(' . $tmp .')'; //返回格式,必需
?>
jquery-1.5.2.min.js
自己从网上下载
PHP AJAX JSONP实现跨域请求使用实例的更多相关文章
- ajax jsonp的跨域请求
1.页面ajax的请求 $.ajax({ async: false, url: 'http://localhost:8080/downloadVideos',//跨域的dns/document!sea ...
- js中ajax如何解决跨域请求
js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...
- 使用jsonp进行跨域请求
使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...
- 关于使用Jsonp做跨域请求
今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 利用JSONP实现跨域请求
前言:有时候一忙起来就没了时间观念,原来我已经有十多天没写博客了.一直想做跨域方面的尝试,无奈最近准备校招没时间动动手.今天就先讲讲JSONP吧,昨晚还在研究QQ空间日志里面网络图片的问题呢,我发现日 ...
- mvc中使用jsonp进行跨域请求详细说明
在web开发中,如果你要在不同域下进行数据异步请求,会出现一个No ‘Access-Control-Allow-Origin’ header is present on the requested r ...
- Ajax跨域请求数据实例(JSOPN方式)
今天在做取消申请的时候遇到了一个跨域ajax提交的问题. 情景是: 系统A是asp.net的站点,其中包括一个取消申请的接口(get方式通过参数提交到系统的某一个页面,然后返回提交成功或失败) 系统B ...
- Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...
- CORS和jsonp实现跨域请求
同源策略:所谓同源是指,域名,协议,端口相同,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略.当浏览器同时打开两个tab页面(两个不同服务器 ...
随机推荐
- D3.js学习记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Spring中集合类型属性注入
我们都知道如何去注入普通属性的值,非常简单,那么我们如何去注入开发中常见的集合类型的属性了,别急,往下看. 这里将介绍如何给Map list set Array Properties 这些属性注入值. ...
- H5案例分享:html5移动开发细微之美
html5移动开发细微之美 1.H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=dev ...
- javascript数据结构-队列
gihub博客地址 队列(Queue)是一种特殊的线性表,特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,和栈一样,队列是一种操作受限制的线性表.进行插 ...
- 【Python网络爬虫一】爬虫原理和URL基本构成
1.爬虫定义 网络爬虫,即Web Spider,是一个很形象的名字.把互联网比喻成一个蜘蛛网,那么Spider就是在网上爬来爬去的蜘蛛.网络蜘蛛是通过网页的链接地址来寻找网页的.从网站某一个页面(通常 ...
- 及时取消代码中的AsyncTask
在一个Activity页面,如果发起了AsyncTask任务,然后页面离开/销毁了,此时如果doInBackground没执行完,会有两个问题: 1, AsyncTask白白消耗资源,结果已经用不上了 ...
- 2.MongoDB 基于node.js访问和操作集合
对于频繁使用的Node.js来说,常见的任务是集合的动态操控. 较大的安装给每个大客户一个单独的集合,以便客户登入或离开时.根据需要添加或删除集合. MongoDB Node.js 驱动程序 Db和C ...
- ecshop中foreach的详细用法归纳
ec模版中foreach的常见用法. foreach 语法: 假如后台:$smarty->assign('test',$test); {foreach from=$test item=list ...
- java18
1:Map(掌握) (1)将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值. (2)Map和Collection的区别? A:Map 存储的是键值对形式的元素,键唯一,值可以重 ...
- Multiple dex files define Lcom/google/zxing/BarcodeFormat
解决zxing “Could not find class 'com.goole.zxing.Result”和“Multiple dex files define”问题 时间 2014-04-24 1 ...