`

PHP AJAX 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;
 
?>

 

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

 

 

F:http://www.cnblogs.com/xcxc/p/3729660.html

分享到:
评论

相关推荐

    PHP AJAX JSONP实现跨域请求使用范例_ajax如何解决跨域请求

    PHP AJAX JSONP 实现跨域请求使用实例 在 Web 开发中,跨域请求是指从一个域名下的页面请求另一个域名下的资源,这种情况下,浏览器会限制这种请求,以防止恶意攻击。JSONP(JSON with Padding)是一种解决跨域请求...

    php版 解决跨域问题CORS ajax+get,post+jsonp例子源代码.zip

    而"PHP AJAX JSONP实现跨域请求使用实例 - 神马和浮云 - 博客园.url"是一个链接,可能指向了一个详细的教程或示例,可以帮助你更好地理解和实践这些技术。 总的来说,PHP、AJAX 和 JSONP 是Web开发中跨域请求的重要...

    jsonp跨域请求数据实现手机号码查询实例分析.docx

    ### JSONP 跨域请求数据实现手机号码查询实例分析 #### 前言 在现代Web开发中,跨域问题一直是前端开发者面临的一个常见难题。简单来说,由于浏览器的同源策略限制,当一个网页尝试从不同的源(即不同的协议、端口...

    ajax跨域请求WebService.asmx

    6. **JSONP**:如果服务器不支持CORS,还可以考虑使用JSONP(JSON with Padding)方式来实现跨域。JSONP是一种利用`&lt;script&gt;`标签不受同源策略限制的特性,通过动态创建`&lt;script&gt;`标签,将服务端提供的回调函数名与...

    ajax跨域请求

    本篇文章将通过一个具体的示例(JSP页面+后台实例)来详细介绍如何实现AJAX跨域请求。 #### 二、同源策略概述 同源策略(Same-origin policy)是浏览器的一项安全措施,用于限制一个源上的网页脚本与另一个源上的...

    原生JS实现ajax与ajax的跨域请求实例

    以下是如何使用原生JavaScript实现一个简单的AJAX请求的步骤: 1. **创建XMLHttpRequest对象**:在JavaScript中,我们首先需要创建一个XMLHttpRequest对象,它是AJAX的核心,用于与服务器进行异步通信。 ```...

    jsonp跨域请求实现示例

    在jQuery中,使用`$.ajax`方法可以方便地实现JSONP请求。通过设置`dataType`为`jsonp`,并且指定`jsonpCallback`参数,jQuery会自动创建一个`&lt;script&gt;`标签并插入到文档中执行。如下是jQuery中发起JSON请求的示例...

    java版 解决跨域问题CORS ajax+jsonp例子源代码.zip

    描述中的“java web版 跨域 ajax+jsonp例子源代码.zip”进一步强调这是基于Java Web的示例,用于解决JavaScript通过AJAX进行跨域请求时遇到的问题。AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个页面...

    Ajax结合Jsonp实例

    总结起来,Ajax与Jsonp的结合使用能够让我们在Jquery中轻松地实现跨域数据交互,从而提升Web应用的功能性和用户体验。在实际开发中,需要注意处理可能出现的错误情况,以及合理设计API接口的调用,以保证应用的稳定...

    跨域访问解决方法-jsonp

    跨域访问是Web开发中一个常见的挑战,尤其是在进行Ajax异步请求时,浏览器的同源策略(Same-origin policy)会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题,开发者通常采用JSONP(JSON with ...

    Ajax的jsonp方式跨域获取数据的简单实例

    Ajax的jsonp方式跨域获取数据的简单实例中,涉及到了Web开发中常见的跨域问题以及解决这一问题的方法之一——JSONP(JSON with Padding)。为了深入理解,让我们从以下几个方面探讨这些知识点: 1. 跨域问题 在Web...

    ajax跨域实例

    在本文中,我们将讨论两个 Ajax 跨域实例,分别使用 JSONP 和 jQuery 来实现跨域操作。 知识点一:JSONP 跨域 JSONP(JSON with Padding)是一种用于跨域操作的技术,它可以突破浏览器的同源策略限制。JSONP 的...

    jQuery使用JSONP实现跨域获取数据的三种方法详解

    本文实例讲述了jQuery使用JSONP实现跨域获取数据的三种方法。分享给大家供大家参考,具体如下: 第一种方法是在ajax函数中设置dataType为’jsonp’ $.ajax({ dataType: 'jsonp', url: '...

    轻松搞定jQuery+JSONP跨域请求的解决方案

    在使用jQuery处理JSONP请求时,可以通过jQuery提供的Ajax方法来实现。而$.getJSON方法可以看作是$.ajax的一个简化版本,专门用于发送GET请求。当调用$.getJSON方法时,会自动在请求的URL中添加callback参数,而该...

    ajax跨域调用wcf实例

    3. **使用jQuery或原生JavaScript发起AJAX请求**:在客户端,我们可以使用jQuery的`$.ajax()`或原生的`XMLHttpRequest`对象发起跨域请求。确保指定`dataType`为`json`,`type`为`GET`或`POST`,以及目标URL。 ```...

    AJAX jsonp应用,页面配置以及后台代码

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性,来解决AJAX在同源策略限制下的数据获取问题。本教程将详细介绍AJAX如何与JSONP结合使用,以及在前端和后端实现...

    jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友

    Ajax + Servlet 跨域访问(Jsonp技术)

    在这种背景下,Jsonp(JSON with Padding)应运而生,它是一种允许跨域数据交互的技术,特别适用于Ajax请求。 Jsonp的核心思想是利用HTML `&lt;script&gt;`标签的src属性可以不受同源策略限制的特性。它的工作流程如下: ...

    详解java 中Spring jsonp 跨域请求的实例

    在实际开发中,实现Spring JSONP跨域请求需要注意以下几点: 1. 确保已引入必要的依赖包,如`spring-boot-starter-jersey`和`spring-boot-starter-web`,它们分别用于支持Jersey和Spring MVC。 2. 创建一个继承自`...

Global site tag (gtag.js) - Google Analytics