100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > PHP AJAX JSONP实现跨域请求使用实例

PHP AJAX JSONP实现跨域请求使用实例

时间:2021-01-01 10:01:37

相关推荐

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', //这里用GETurl: '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

自己从网上下载

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。