文档章节

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

zyt_1978
 zyt_1978
发布于 2016/06/19 20:50
字数 534
阅读 74
收藏 0

精选30+云产品,助力企业轻松上云!>>>

在之前我写过“php返回json数据简单实例”,“php返回json数据中文显示的问题”和“在PHP语言中使用JSON和将json还原成数组”。有兴趣的童鞋可以看看

今天我写的是PHP AJAX JSONP使用的实例。不清楚jsonp是什么的请自己搜索

实例1

test.html

1

2

3

4

5

6

7

8

9

10

11

12

<!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

1

2

3

4

5

6

7

8

9

10

11

12

13

$.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

1

2

3

4

5

6

7

8

<?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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

$(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

1

2

3

4

5

6

7

8

<?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 .')';  //返回格式,必需

?>

zyt_1978
粉丝 9
博文 166
码字总数 21058
作品 0
程序员
私信 提问
加载中
请先登录后再评论。
跨域之JSONP

1 跨域及同源策略 1.1 什么是跨域 一般来说,如果你在开发中需要进行跨域操作(从一个非同源网站发送请求获取数据),一般而言,你在浏览器控制台看到的结果为: 像这样发送ajax请求会在浏览...

zjg23
2016/11/27
23
0
原生JavaScript实现AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要...

TGCode
2019/09/29
0
0
原生 JavaScript 实现 AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择中封装的方法,但是有些时候,我们只需要的请求方法,而其他的功能用到的很少,这显然是没必要的。 其实,原生实现...

osc_lsc01x8k
2018/04/28
2
0
PHP判断ajax请求:HTTP_X_REQUESTED_WITH

有时我们需要判断是不是ajax请求来决定模块输出还是json格式输出. PHP判断ajax请求的原理: 在发送ajax请求的时候,我们可以通过XMLHttpRequest这个对象,创建自定义的header头信息, 在jquer...

鬼方赤命
2016/11/22
68
0
理解json和jsonp的定义和区别以及如何实际使用

(一)什么是跨域请求? 首先要理解什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类...

osc_kt288isk
2018/07/23
4
0

没有更多内容

加载失败,请刷新页面

加载更多

唐山5.1级地震 百度人工智能技术帮上忙:成都减灾所提前30秒让北京、天津市民收到预警

本文作者:y****n 7月12日6时38分在河北唐山市古冶区发生5.1级地震,成都高新减灾研究所与应急管理部门联合建成的大陆地震预警网成功预警该地震,给唐山市提前3秒预警,给天津市提前33秒预警...

百度开发者中心
昨天
30
0
如何使用PHP发送POST请求? - How do I send a POST request with PHP?

问题: Actually I want to read the contents that come after the search query, when it is done. 实际上,我想阅读搜索查询之后的内容,完成之后。 The problem is that the URL only a......

javail
今天
14
0
如何从Java读取文件夹中的所有文件? - How to read all files in a folder from Java?

问题: 如何通过Java读取文件夹中的所有文件? 解决方案: 参考一: https://stackoom.com/question/7jt2/如何从Java读取文件夹中的所有文件 参考二: https://oldbug.net/q/7jt2/How-to-rea...

富含淀粉
今天
25
0
主机“ xxx.xx.xxx.xxx”不允许连接到该MySQL服务器

问题: This should be dead simple, but I cannot get it to work for the life of me. 这本来应该很简单,但是我无法让它在我的一生中发挥作用。 I'm just trying to connect remotely to......

技术盛宴
今天
20
0
OSChina 周二乱弹 —— 附近居民接连失踪,你们有什么头绪吗

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《伤离别(原版)》- 黄霑 手机党少年们想听歌,请使劲儿戳(这里) @巴拉迪维 :睡...

小小编辑
今天
48
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部