`
arm10504
  • 浏览: 17866 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

代替jquery $.post 跨域提交数据的N种形式

    博客分类:
  • js
阅读更多
跨域的N种形式:
1.直接用jquery中$.getJSON进行跨域提交

          优点:有返回值,可直接跨域;

          缺点:数据量小;

          提交方式:仅get (无$.postJSON)



[javascript] view plaincopy
01. $.getJSON("http://www.sendnet.cn/?callback=?" , { UserId: 1001 }, 
02.nction (data) { 
03.alert(data.info); 
04.; 



[javascript] view plaincopy
01.$.ajax({ 
02.             type: "Get", 
03.             url: "http://www.sendnet.cn/?UserId=1001", 
04.             cache: false, 
05.             error: function () { }, 
06.             jsonp: "callback", 
07.             dataType: "jsonp", 
08.             success: function (result) { 
09.                 alert(result.info);  
10.             } 
11.         }); 




2.在页面中嵌入一个iframe,把iframe的宽和高设置为0进行跨域提交

           优点:可直接跨域;

           缺点:无返回值(脱离ajax本质);

          提交方式:get/post



[plain] view plaincopy
01.使用隐藏的iframe来提交表单  
02.1,在页面中嵌入一个iframe,把iframe的宽和高设置为0  
03.2.在iframe的里面里设置一个from的表单,表单的内容就是真正要提交的表单内容。  
04.3.当点击按钮的时候是iframe里的表单提交。 
05. 
06. 
07.<form id="form2" name="form2" method="post" action="a,jsp" enctype="multipart/form-data">  
08.  <input name="option_13412" id="option_13412" type="text"/>  
09.  <input name="option_13413" id="option_13413" type="text"/>  
10.  <input name="option_13414" id="option_13414" type="text"/>  
11.  <input name="option_13415" id="option_13415" type="text"/>  
12.</form> 
13. 
14.使用jquery来啊操作iframe中的表单元素  
15.$(window.frames["iframe1"].document).find("#option_13412").val(name);  
16.$(window.frames["iframe1"].document).find("#option_13413").val(phone);  
17.$(window.frames["iframe1"].document).find("#option_13415").val(content); 
18. 
19.通过按钮来提交iframe里的表单  
20.$(window.frames["iframe1"].document).find("#form2").submit(); 




3.直接用$.post跨域,先提交到本地域名下一个代理程序,通过代理程序向目的域名进行post或get提交,并根据目的域名的返回值通过代理 程序返回给本地页面

          优点:有返回值,可直接跨域,可通过 代理程序 统计ip等用户信息,增加安全性;

          提交方式:get/post

          复杂度:需要前端工程师和后端工程师配合(php/java../工程师) 

           缺点:需要消耗本地服务器资源,增加ajax等待时间(可忽略)




4.向百度学习的思路:由于调用任何js文件不涉及跨域问题,所以js脚本中可以编写调用远程服务器上的js文件,该文件实现你需要的业务。

           即a.js动态调用www.baidu.com/b.js ,其中b.js实现业务





5.待研究…………


分享到:
评论

相关推荐

    ie下$.getJSON出现问题的解决方法

    在JavaScript和jQuery的世界里,`$.getJSON`是一个非常常见的用于获取JSON格式数据的异步方法。这个方法在大多数浏览器中工作良好,但在某些版本的Internet Explorer(尤其是IE8及更早版本)中可能会遇到问题。本文...

    jQuery 权威指南(压缩版)

    - **$.get()**和`$.post()`:简化的GET和POST请求,常用于异步数据获取和提交。 - **$.getJSON()**:专门用于获取JSON格式数据。 - **$.load()**:加载HTML片段并插入到匹配的元素中。 6. **jQuery插件开发** -...

    jqueryapi文档

    `$.get()`和`$.post()`则是简化的GET和POST请求。 2. **JSONP(JSON with Padding)**:jQuery支持JSONP跨域数据获取,通过动态创建`&lt;script&gt;`标签来实现。 五、jQuery插件 jQuery的生态中包含大量插件,如用于...

    jquery知识大全

    $.get()和$.post()简化了GET和POST请求。 - **数据处理**:.done()和.fail()处理请求成功和失败的回调,.always()无论结果如何都会执行。 - **JSONP跨域**:jQuery支持JSONP方式解决跨域问题。 4. **插件生态** ...

    JQuery实现经典网站后台框架[动易程序改版]

    1. AJAX:JQuery的`$.ajax()`或`$.get()`, `$.post()`等方法简化了异步数据请求,实现了前后台无刷新交互。 2. JSONP:对于跨域数据请求,JQuery支持JSONP模式,通过动态创建`&lt;script&gt;`标签来获取服务器数据。 三...

    jquery1.7中文帮助文档(API)+ajax中文手册+详解

    1. **$.fn.on()** - 代替了.bind(), .delegate() 和 .live(),提供了一种统一的事件绑定方式,支持事件委托。 2. **$.ajax()** - 进行Ajax请求的核心函数,支持GET和POST等多种HTTP方法,可以自定义请求头、数据类型...

    初识jQuery

    jQuery提供了`$.ajax()`, `$.get()`, `$.post()`等方法进行异步数据请求。它们简化了XMLHttpRequest对象的使用,使得跨域请求和JSONP变得简单。例如: ```javascript $.get("example.php", function(data) { $("#...

    JQuery帮助文档

    2. **$.get()和$.post()**: 这两个简化的函数分别用于GET和POST请求。它们接受URL、数据和回调函数作为参数。 3. **$.getJSON()**: 用于获取JSON格式的数据。它将自动处理JSONP跨域问题。 4. **$.load()**: 用于...

    jquery核心讲解

    jQuery的`$.ajax()`函数是进行异步数据请求的核心,它封装了XMLHttpRequest对象,简化了跨域请求、JSONP等复杂操作。此外,`$.get()`, `$.post()`等简化的API也常被用于快速实现Ajax请求。 六、jQuery插件开发 ...

    jquery-api-1-7

    1.7版本增加了`$.ajaxSetup()`,用于全局配置Ajax请求,还有`$.getJSON()`用于获取JSON数据。同时,`$.ajax()`的`dataType`选项支持更多类型,如`jsonp`,方便跨域请求。 6. **链式操作(Chaining)** jQuery的一...

    jquery 教程及很多的插件

    jQuery 的 `$.ajax()` 方法简化了异步数据请求,包括 GET 和 POST 请求,支持 JSONP、AJAX 跨域等功能。`$.getJSON()` 和 `$.getScript()` 专门用于获取 JSON 数据和外部脚本。 ### 四、jQuery与其他库和框架的集成...

    jquery库及使用说明

    6. **Ajax操作**:`.ajax()`, `.get()`, `.post()`等函数简化了异步数据请求,支持JSONP跨域请求。 ### jQuery入门教程 1. **引入jQuery库**:在HTML文档的`&lt;head&gt;`或`&lt;body&gt;`标签内通过`&lt;script&gt;`标签引入jQuery...

    jquer代码集

    使用`$.ajax()`, `$.get()`, `$.post()` 等函数可以进行异步数据请求。例如,`$.getJSON(url, data, callback)` 可以获取JSON格式的数据并执行回调函数。 6. **链式操作**: jQuery对象方法返回的是jQuery对象...

    jquery学习资料

    6. **Ajax交互**: jQuery的`$.ajax()`, `$.get()`, `$.post()`简化了与服务器的数据交互,支持异步请求和JSONP处理跨域问题。 7. **插件生态**: jQuery拥有丰富的插件库,如用于表单验证的jQuery Validation,用于...

    ajax学习文档下载

    使用jQuery的`$.ajax()`、`$.get()`、`$.post()`等函数,可以更方便地发起Ajax请求,并处理响应数据。 ### 5. CORS跨域问题 Ajax请求可能遇到同源策略限制,即只能访问与当前页面同源(协议、域名、端口相同)的...

    6套jquery在线客服皮肤样式

    jQuery的`$.ajax()`或`$.post()`、`$.get()`方法可以方便地实现这一功能,实现实时聊天。 5. **CSS样式**:6套皮肤样式代表了不同的视觉设计,包括颜色、字体、布局等,通过修改CSS类或直接操作样式属性,可以改变...

    AJAX-技术入门介绍.zip_ajax_异步请求

    例如,使用`$.ajax()`或`$.get()`, `$.post()`等方法,可以快速地发起AJAX请求。 ### 6. 实战应用 在实际开发中,AJAX常用于实现诸如页面分页加载、表单无刷新提交、实时数据更新等功能。例如,一个简单的使用AJAX...

    ajax学习源码

    为了简化Ajax的使用,jQuery提供了$.ajax()、$.get()、$.post()等函数。其他库如axios、fetch API也提供了更简洁的API,让开发者更专注于业务逻辑。 **实例分析** 在提供的压缩包文件中,有三个文件0508、0506、...

    AJAX开发简略含续一(PDF).zip

    - **jQuery的AJAX方法**:如`$.ajax()`, `$.get()`, `$.post()`等,提供更友好的API来发送AJAX请求。 ### 5. 跨域问题 由于同源策略的限制,AJAX请求通常只能访问同一域名下的资源。为解决跨域问题,可以使用CORS...

    ajax经典实例大全

    3. **Ajax与jQuery**:jQuery简化了Ajax的使用,提供了`$.ajax()`、`$.get()`、`$.post()`等方法。 4. **跨域问题**:了解CORS(Cross-Origin Resource Sharing)机制,解决Ajax跨域请求的问题。 5. **Ajax与...

Global site tag (gtag.js) - Google Analytics