ajaxSubmit()提交表单

1.表单提交

submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。$(selector).submit(function)

使用 preventDefault() 函数来阻止对表单的提交。

ajaxSubmit()提交表单,使用第三方插件jquery.form实现;

通常情况下,我们直接通过form提交的话, 提交后当前页面跳转到form的action所指向的页面。然而,很多时候我们比不希望提交表单后页面跳转,那么,我们就可以使用ajaxSubmit(obj)来提交数据。

$(‘button‘).on(‘click‘, function() {
    $(‘form‘).on(‘submit‘, function() {
        var title = $(‘inpur[name=title]‘).val(),
            content = $(‘textarea‘).val();
        $(this).ajaxSubmit({
            type: ‘post‘, // 提交方式 get/post
            url: ‘your url‘, // 需要提交的 url
            data: {
                ‘title‘: title,
                ‘content‘: content
            },
            success: function(data) { // data 保存提交后返回的数据,一般为 json 数据
                // 此处可对 data 作相关处理
                alert(‘提交成功!‘);
            }
            $(this).resetForm(); // 提交后重置表单
        });
        return false; // 阻止表单自动提交事件,必须返回false,否则表单会自己再做一次提交操作,并且页面跳转

});
});

如果要提交之后返回数据再触发ajax异步交互(实际就是一个按钮触发两个事件,后一个事件要等前一个事件完成的情况才触发)

$("#uploadImage").on("submit",function () { //触发form表单提交,url写在form标签    $("#uploadImage").ajaxSubmit(options); // form表单提交后触发    return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转});
var options = {    //target: ‘#picSrc‘,          //把服务器返回的内容放入id为picSrc的元素中
    //beforeSubmit: function({                }),  //提交前的回调函数    success:function (backData) { //提交后的回调函数

        var sendData={            "srcImageFile":backData.serviceIcon,            "result":backData.serviceIcon,

        };        $.ajax({            url:"/Wisdom/smartCampus/service/cutPicture",//交互地址            type:"post",//方法            //dataType:"json",            contentType:"application/json",//头部            data:JSON.stringify(sendData),//数据            success:function (backData) {                $("#uploadImage").resetForm();//重置表单

            }        })    },    timeout: 3000               //限制请求的时间,当请求大于3秒后,跳出请求};
 
时间: 2024-10-14 06:32:09

ajaxSubmit()提交表单的相关文章

jQuery中使用ajaxSubmit提交表单

1.http://www.cnblogs.com/liuhongfeng/p/5150389.html 2.http://blog.csdn.net/baidu_29119747/article/details/51395736

ajaxSubmit 页面生成的html 中含有表单提交表单方式

$("#form_title").ajaxSubmit({ //页面生成的html 中含有表单提交表单方式 dataType: "json", success : function(obj){ lock_flag = false; if(obj.errno == 0){ lock_flag = false; layer.msg(obj.errdesc); setTimeout(function() { window.location.reload(); },2000

提交表单详解

阅读目录 简单的表单,简单的处理方式 表单提交,成功控件 多提交按钮的表单 上传文件的表单 MVC Controller中多个自定义类型的传入参数 F5刷新问题并不是WebForms的错 以Ajax方式提交整个表单 以Ajax方式提交部分表单 使用JQuery,就不要再拼URL了! id, name 有什么关系 使用C#模拟浏览器提交表单 资源链接 Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net W

知问前端——Ajax提交表单

本文,运用两大表单插件,完成数据表新增的工作. 一.创建数据库 创建一个数据库,名称为:zhiwen,表——user表,字段依次为:id.name.pass.email.sex.birthday.date. 本人是使用的Navicat for MySQL创建的user表, user表的结构如下: 所需的PHP文件:config.php.add.php.(本人没学过php,所以不过多解释) config.php: <?php header('Content-Type:text/html; char

解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象

原文:解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象 之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的form,还有其他一些form插件也是一样的,使用不当就会遇到这个问题. 前台: <!DOCTYPE html> <html> <head> <meta http-equiv=

第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action="yzh.php" title="会员注册"> <ol class="reg_error"></ol> <p> <label for="user">帐号:</label>

JQuery - 提交表单

[JavaScript] JQuery异步提交表单与文件上传 Jquery.form.js是一个可以异步提交表单及上传文件的插件. 文档地址:http://jquery.malsup.com/form/ index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/

ajax提交表单、ajax实现文件上传

ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用jquery的$.ajax({..}), 支持提交普通表单,但不支持含有文件的复杂表单; ($.post 或 $.get底层用的都是$.ajax) 方式三:使用jquery插件ajaxFileUpload.js, 支持上传文件,但不支持提交表单 方式四:使用jquery.from.js,支持提交同时

ajax提交表单,并且可以支持文件上传

当我们提交表单但是又不想要刷新页面的时候就可以考虑使用ajax来实现提交功能,但是这有个局限就是当有文件上传的时候是行不通的,下面借助于jquery.form可以很方便满足我们的需求. 1.表单写法: <form class="ui form error-page" id="error_page" method="post" action="{{ url('web/save/error-page') }}" enctyp