• jquery post get 跨域 提交数据


    [转载 jquery post 跨域 提交数据
    2011-06-28 11:10

    跨域的N种形式:

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

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

              缺点:数据量小

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

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

               优点:可直接跨域;

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

        提交方式:get/post

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

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

       提交方式:get/post

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

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

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

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

    5.待研究......


    1.使用post提交方式

    2.构造表单的数格式

    3.结合form表单的submit调用ajax的回调函数。

    代码:

    使用 jQuery 异步提交表单
    复制代码
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>无标题页</title>
    </head>
    <script src="js/jquery-1.4.2.js"></script>
    <script>
    jQuery(
    function($) {
    // 使用 jQuery 异步提交表单
    $('#f1').submit(function() {
    $.ajax({
    url:
    'ta.aspx',
    data: $(
    '#f1').serialize(),
    type:
    "post",
    cache :
    false,
    success:
    function(data)
    {alert(data);}
    });
    return false;
    });
    });

    </script>
    <body>
    <form id="f1" name="f1">
    <input name="a1" />
    <input name="a2" />
    <input id="File1" type="file" name="File1"/>
    <input id="Submit1" type="submit" value="submit" />
    </form>
    </body>
    </html>
    复制代码

    如何异步跨域提交表单呢?

    1.利用script 的跨域访问特性,结合form表单的数据格式化,所以只能采用get方式提交,为了安全,浏览器是不支持post跨域提交的。

    2.采用JSONP跨域提交表单是比较好的解决方案。

    3.也可以动态程序做一代理。用代理中转跨域请求。

     代码:

    使用 jQuery 异步跨域提交表单
    复制代码
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>无标题页</title>
    </head>
    <script src="js/jquery-1.4.2.js"></script>
    <script>
    jQuery(
    function($)
    {
    // 使用 jQuery 异步跨域提交表单
    $('#f1').submit(function()
    {
    $.getJSON(
    "ta.aspx?"+$('#f1').serialize()+"&jsoncallback=?",
    function(data)
    {
    alert(data);
    });
    return false;
    });
    });

    </script>
    <body>
    <form id="f1" name="f1">
    <input name="a1" />
    <input name="a2" />
    <input id="File1" type="file" name="File1"/>
    <input id="Submit1" type="submit" value="submit" />
    </form>
    </body>
    </html>
    复制代码

    补充:方法1不能实现跨越提交。

    注意:输出json格式{'a1','a1value','a2':'a2value'}

    字符必须用引号包住,数字可以不加引号。如:{'a1',10,'a2':20}

  • 相关阅读:
    13.Convert BST to Greater Tree(将树转为更大树)
    13.调用数组顺序使奇数位于偶数前面
    12.数值的整数次方
    11.二进制中1的个数
    12.Hamming Distance(汉明距离)
    11.Find All Numbers Disappeared in an Array(找出数组中缺失的数)
    10.Find All Anagrams in a String(在一个字符串中发现所有的目标串排列)
    垃圾收集器与内存分配策略---垃圾收集器
    线程之间的协作
    1287. Mars Canals(DP)
  • 原文地址:https://www.cnblogs.com/chorrysky/p/2794705.html
Copyright © 2020-2023  润新知