zoukankan      html  css  js  c++  java
  • JQuery 异步提交表单

    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> 
  • 相关阅读:
    软件开发 —— 重构(refactor)
    语言与哲学 —— 维特根斯坦
    【撸码caffe 三】 caffe.cpp
    编程语言入门及进阶、设计模式、面向对象书籍
    用ISA2006配置单网卡缓存服务器
    Forefront TMG 之 ISP 冗余传输链路(ISP-R)
    MDT配置数据库
    MDT概念说明
    更改SQL实例端口
    SCCM2012安装、配置
  • 原文地址:https://www.cnblogs.com/aiky/p/4421836.html
Copyright © 2011-2022 走看看