jquery post 跨域提交数据

最新推荐文章于 2021-07-28 11:10:27 发布

ufojoan

最新推荐文章于 2021-07-28 11:10:27 发布

阅读量1k

点赞数

分类专栏：前端

前端专栏收录该内容

98 篇文章

订阅专栏

本文详细介绍了跨域请求的五种实现方法，包括直接使用jQuery进行GET提交、使用iframe进行跨域提交、通过代理程序进行跨域post或get提交、动态调用远程js文件以及待研究的技术方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域的N种形式：

1.直接用jquery中$.getJSON进行跨域提交

优点：有返回值,可直接跨域；

缺点：数据量小；

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

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

优点：可直接跨域；

缺点：无返回值(脱离ajax本质)；

提交方式：get/post

<script type="text/javascript" src="http://style.org.hc360.com/js/build/source/core/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {  
    $("#submit1").bind("click", function() {
        $("#form1").submit();  
    }); 
    $("#submit2").bind("click", function() {
        $("#form2").submit();  
    });  
})
</script>
 
<body>
    <div id="submit1">点击跨域chat.im.hc360.com</div>
    <div id="submit2">点击跨log.info.hc360.com</div>
    <form action="http://chat.im.hc360.com/WebimChatContent/info.htm" id="form1" name="form1"  enctype="application/x-www-form-urlencoded" method="post" target="hidden_frame1">  
           <input type="text" id="aa1" name="aa1" value=""/>
           <input type="text" id="bb1" name="bb1" value=""/>
           <input type="text" id="cc1" name="cc1" value=""/>
           <input type="text" id="dd1" name="dd1" value=""/>
           <input type="text" id="ee1" name="ee1" value=""/>
           <input type="text" id="ff1" name="ff1" value=""/>  
       <iframe name="hidden_frame1" id="hidden_frame1" style="display:none"></iframe>  
   </form>
    <form action="http://log.info.hc360.com/click.htm" id="form2" name="form2"  enctype="application/x-www-form-urlencoded" method="post" target="hidden_frame2">  
           <input type="text" id="aa2" name="aa2" value=""/>
           <input type="text" id="bb2" name="bb2" value=""/>
           <input type="text" id="cc2" name="cc2" value=""/>
           <input type="text" id="dd2" name="dd2" value=""/>
           <input type="text" id="ee2" name="ee2" value=""/>
           <input type="text" id="ff2" name="ff2" value=""/>   
       <iframe name="hidden_frame2" id="hidden_frame2" style="display:none"></iframe>  
   </form>
</body>

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

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

提交方式：get/post

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

缺点：需要消耗本地服务器资源，增加ajax等待时间（可忽略）

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

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

5.待研究……

……