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实现跨域请求使用实例,布布扣,bubuko.com

时间: 2024-10-10 13:07:17

PHP AJAX JSONP实现跨域请求使用实例的相关文章

ajax jsonp的跨域请求

1.页面ajax的请求 $.ajax({ async: false, url: 'http://localhost:8080/downloadVideos',//跨域的dns/document!searchJSONResult.action, type: "GET", dataType: 'jsonp', jsonp: 'jsoncallback', jsonpCallback: "cb",//自定义返回函数的名称,要与服务端保持一致 data: { id:ID,

js中ajax如何解决跨域请求

js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操作. 跨域指的协议.域名.端口 有一个不同的情况下都是跨域 例:在本站点请求外站的数据是不允许的 //在本站点请求外站点的资源是不允许的 $(function () { $.ajax({ url: "http://127.0.0.1:14847/Web/jsonp.js", success

Vue中使用jsonp进行跨域请求

Vue-resouse中可以通过this.$http.jsonp的方式直接使用jsonp进行跨域请求.官方在推荐使用axios之后,axios并没有集成jsonp.但在axios的github中(https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp),可以直接安装jsonp并使用他来坐跨域请求. <script> var jsonp = require('jsonp'); export default { data(

ajax跨域请求操作实例

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS</title> <style> #box{ width:600px; height:200px; padding:20px; border:1px solid #999; } </style> </head> <

Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为域名地址(在跨域问题上,域仅仅是通过“ url的首部 ”来识别而不会去尝试判断相同的IP地址对应着两个域或者两个域是否同属同一个IP),之中任意服务端旗下的客户端发起请求其它服务端资源的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 但很多时候我们却又不得不

用JSONP方式跨域请求

JQUERY 中封装的JSONP请求方法 1.index.html 中的javascript $(function(){ $.ajax({   type: "GET",   async:false,   url: "http://www.vm.com:81/index.php", //跨域请求的地址   data:{'birt':2016},   dataType: 'jsonp',   jsonp: 'jsoncallback',   success: funct

mvc中使用jsonp进行跨域请求详细说明

在web开发中,如果你要在不同域下进行数据异步请求,会出现一个No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”的错误提示.该提示信息说明,跨域请求是违反了“同源策略”的.但是在开发中又难免会遇到跨域请求的需求,所以前辈们也是留下了跨域请求数据的方法jsonp跨域请求. 我们以最为典型的Jquery做例子,后台用的asp.net mvc.我们先构造一个action的返回对象,用于返回json

利用jsonp实现跨域请求

同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行.如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 由于同源策略,我们在使用ajax请求资源时不能跨域请求,也就是说必须是同一个域名,协议,端口.

原生js封装ajax,实现跨域请求

描述: 需要ajax跨域请求,用cors跨域方案.服务端设置: header('Access-Control-Allow-Origin: http://front.ls-la.me'); header('Access-Control-Allow-Headers: X-Requested-With'); 设置了: 后端需要的头信息,原生ajax以表单方式post提交数据,json数据data转换成key1=val1&key2=val2 的字符串格式 1 var ajaxHdFn = functio