原文地址:
http://www.luocheng.cn/article-view-246.html
我们在运营一个产品的时候往往会遇到这样那样的表单提交,如客户数据收集、申请加盟、意见反馈等,由此我们开发了这样一个产品,可以理解为万能型数据收集平台,不难想到,我们在前端会遇到跨域的问题,比如 www.a.com 需要提交数据到www.app.com,以前我们用服务端代理来解决跨域问题,上次遇到一台windows服务器,实现代理比较麻烦,于是想到了jquery实现。他有两种方法,getJSON和getScript.
getScript我常用来获取服务端数据,getJSON可用于提交信息,其实两者均是实现跨域提交。
在jQuery1.3.2中,您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据,如"myurl?callback=?"。jQuery将自动替换?为正确的函数名,以执行回调函数。
Jsonp原理:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里动态执行回调函数。
实例:
jquery代码:
$.getJSON("http://www.app.com/index.php?c=add&callback=?",{id: 10, name: "test"}, function(data){
alert(data.msg);
});
服务端返回:
jsonp1310628945031({"rs":true,"msg":"u60a8u7684u4fe1u606fu63d0u4ea4u6210u529fuff01"})
PHP代码:
$result['rs'] = false;
$result['msg'] = '您的信息提交成功!';
$json = new Services_JSON();
header('Content-Type: application/json');
echo $_GET['callback'].'('.$json->encode($result).')';
分享到:
相关推荐
JQuery AJAX 跨域提交参数、接收 JSON 数据 JQuery 的 AJAX 功能是实现异步数据...JQuery 的 AJAX 功能提供了多种方法来实现跨域提交参数和接收 JSON 数据,我们可以根据具体情况选择合适的方法来实现跨域数据交互。
本文将深入探讨如何在ASP.NET中配置允许jQuery进行跨域提交请求数据的方法。 首先,了解CORS的工作原理。CORS通过在HTTP头信息中添加`Access-Control-Allow-*`字段来实现跨域访问。服务器需要明确允许哪些源可以...
如果需要使用POST方式进行跨域,可以采取其他技术,如CORS(跨源资源共享)或使用IFrame和窗体提交。但是,jQuery本身并不直接支持JSONP之外的跨域POST请求。 在上面的例子中,`$.ajax()`方法用于发起跨域请求,`...
为了实现跨域提交,我们通常采取以下几种策略: #### 使用JSONP JSONP(JSON with Padding)是一种技术手段,可以用来实现跨域请求。它利用`<script>`标签可以跨域的特性,动态创建一个`<script>`元素,然后在...
【jQuery实现跨域异步上传文件总结】 在Web开发中,由于同源策略的限制,JavaScript通常无法在不同域之间进行通信。然而,通过使用jQuery和特定的技术手段,我们可以实现跨域异步上传文件。本文将对这一过程进行...
本篇文章将深入探讨JSONP的工作原理以及在jQuery下如何利用它来实现异步跨域提交表单。 ### JSONP简介 JSONP是一种解决跨域问题的技术,其核心思想是利用`<script>`标签不受同源策略限制的特性。当浏览器解析到`...
本文将详细介绍如何使用jQuery.form插件,实现完美的表单异步提交。 首先,我们需要了解jQuery.form插件的基本用法。在开始之前,请确保已经在项目中引入了jQuery库以及jQuery.form插件。通常,这两个文件可以通过...
jquery mobile + html5 手机app表单跨域提交实例 详细讲解请参考 http://blog.csdn.net/lzy8395/article/details/39666027 手机app开发html5 juqery moblie phonegap系列一
这篇文章介绍了如何使用JQuery和Servlet技术实现跨域请求,为读者提供了一个实用的示例。 首先,我们了解了同源策略。同源指的是两个URL的协议、端口和域名必须完全相同。如果两个URL不同源,则一个源的Web页面中的...
本文将详细探讨如何在PHP中实现跨域提交form表单,并详细介绍了两种方法:使用PHP cURL库和利用jQuery的ajaxSubmit方法。 首先,我们来看看使用PHP cURL库进行跨域表单提交的方法。cURL是一个强大的库,可用于处理...
在这里,我们将探讨如何利用jQuery Mobile和Ajax实现跨域请求。 首先,理解什么是跨域请求。由于浏览器的安全策略,JavaScript通常被限制在同源策略之下,即只能访问与当前页面相同协议、域名和端口的资源。但有时...
最后,虽然示例中提供的代码片段不完整,但根据上下文我们依然能够理解实现跨域异步上传文件功能的基本原理和操作流程。在实际开发中,我们应当根据项目具体需求和环境限制,选择合适的方法来实现这一功能。
当我们在使用jQuery的Ajax技术进行跨域提交时,可能会遇到一个问题,即一个Ajax请求会触发两次服务端请求。这不仅会增加服务器的负载,还会造成不必要的网络开销和延迟。在移动端的跨域请求中,这种现象尤为常见。 ...
JSONP(JSON with Padding)是解决这一问题的传统方法之一,而jQuery的getJSON方法在实现跨域请求时,也会采用类似JSONP的方式。 首先,我们来看一下JSONP的基本概念。JSONP是一种利用`<script>`标签可以跨域请求...
在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互等任务。...理解这些概念和用法,能够帮助开发者在jQuery 1.3.2或其他版本中高效地实现表单的Ajax提交。
本文将深入探讨如何使用jQuery的ajax方法来提交表单,从而实现异步数据交换,提高用户体验。 首先,jQuery的$.ajax()函数是进行Ajax请求的核心,它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...
本文主要介绍jQuery.form插件的使用方法,以及如何实现跨域异步上传文件。 首先,了解jQuery.form插件是关键。jQuery.form是jQuery的一个扩展,它提供了对表单进行异步提交的功能。传统表单提交是阻塞式的,意味着...