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> 
  • 相关阅读:
    2021.6.2 Python网络编程
    2021.6.1 数据库
    2021.5.29 PHP大作业
    2021.5.28 bootstrap和vue
    2021.5.27 三个和尚
    2021.5.26 Python操作Mysql数据库
    2021.5.25 PHP作业
    2021.5.24 Python解析XML
    如何用 GPU 训练模型?
    44 内核中的中断处理(上)
  • 原文地址:https://www.cnblogs.com/aiky/p/4421836.html
Copyright © 2011-2022 走看看