实例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 .')'; //返回格式,必需 ?>
相关推荐
PHP AJAX JSONP 实现跨域请求使用实例 在 Web 开发中,跨域请求是指从一个域名下的页面请求另一个域名下的资源,这种情况下,浏览器会限制这种请求,以防止恶意攻击。JSONP(JSON with Padding)是一种解决跨域请求...
而"PHP AJAX JSONP实现跨域请求使用实例 - 神马和浮云 - 博客园.url"是一个链接,可能指向了一个详细的教程或示例,可以帮助你更好地理解和实践这些技术。 总的来说,PHP、AJAX 和 JSONP 是Web开发中跨域请求的重要...
6. **JSONP**:如果服务器不支持CORS,还可以考虑使用JSONP(JSON with Padding)方式来实现跨域。JSONP是一种利用`<script>`标签不受同源策略限制的特性,通过动态创建`<script>`标签,将服务端提供的回调函数名与...
### JSONP 跨域请求数据实现手机号码查询实例分析 #### 前言 在现代Web开发中,跨域问题一直是前端开发者面临的一个常见难题。简单来说,由于浏览器的同源策略限制,当一个网页尝试从不同的源(即不同的协议、端口...
本篇文章将通过一个具体的示例(JSP页面+后台实例)来详细介绍如何实现AJAX跨域请求。 #### 二、同源策略概述 同源策略(Same-origin policy)是浏览器的一项安全措施,用于限制一个源上的网页脚本与另一个源上的...
以下是如何使用原生JavaScript实现一个简单的AJAX请求的步骤: 1. **创建XMLHttpRequest对象**:在JavaScript中,我们首先需要创建一个XMLHttpRequest对象,它是AJAX的核心,用于与服务器进行异步通信。 ```...
在jQuery中,使用`$.ajax`方法可以方便地实现JSONP请求。通过设置`dataType`为`jsonp`,并且指定`jsonpCallback`参数,jQuery会自动创建一个`<script>`标签并插入到文档中执行。如下是jQuery中发起JSON请求的示例...
描述中的“java web版 跨域 ajax+jsonp例子源代码.zip”进一步强调这是基于Java Web的示例,用于解决JavaScript通过AJAX进行跨域请求时遇到的问题。AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个页面...
总结起来,Ajax与Jsonp的结合使用能够让我们在Jquery中轻松地实现跨域数据交互,从而提升Web应用的功能性和用户体验。在实际开发中,需要注意处理可能出现的错误情况,以及合理设计API接口的调用,以保证应用的稳定...
跨域访问是Web开发中一个常见的挑战,尤其是在进行Ajax异步请求时,浏览器的同源策略(Same-origin policy)会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题,开发者通常采用JSONP(JSON with ...
Ajax的jsonp方式跨域获取数据的简单实例中,涉及到了Web开发中常见的跨域问题以及解决这一问题的方法之一——JSONP(JSON with Padding)。为了深入理解,让我们从以下几个方面探讨这些知识点: 1. 跨域问题 在Web...
在本文中,我们将讨论两个 Ajax 跨域实例,分别使用 JSONP 和 jQuery 来实现跨域操作。 知识点一:JSONP 跨域 JSONP(JSON with Padding)是一种用于跨域操作的技术,它可以突破浏览器的同源策略限制。JSONP 的...
本文实例讲述了jQuery使用JSONP实现跨域获取数据的三种方法。分享给大家供大家参考,具体如下: 第一种方法是在ajax函数中设置dataType为’jsonp’ $.ajax({ dataType: 'jsonp', url: '...
在使用jQuery处理JSONP请求时,可以通过jQuery提供的Ajax方法来实现。而$.getJSON方法可以看作是$.ajax的一个简化版本,专门用于发送GET请求。当调用$.getJSON方法时,会自动在请求的URL中添加callback参数,而该...
3. **使用jQuery或原生JavaScript发起AJAX请求**:在客户端,我们可以使用jQuery的`$.ajax()`或原生的`XMLHttpRequest`对象发起跨域请求。确保指定`dataType`为`json`,`type`为`GET`或`POST`,以及目标URL。 ```...
JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`<script>`标签可以跨域请求资源的特性,来解决AJAX在同源策略限制下的数据获取问题。本教程将详细介绍AJAX如何与JSONP结合使用,以及在前端和后端实现...
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友
在这种背景下,Jsonp(JSON with Padding)应运而生,它是一种允许跨域数据交互的技术,特别适用于Ajax请求。 Jsonp的核心思想是利用HTML `<script>`标签的src属性可以不受同源策略限制的特性。它的工作流程如下: ...
在实际开发中,实现Spring JSONP跨域请求需要注意以下几点: 1. 确保已引入必要的依赖包,如`spring-boot-starter-jersey`和`spring-boot-starter-web`,它们分别用于支持Jersey和Spring MVC。 2. 创建一个继承自`...