当前位置:  编程技术>WEB前端

jQuery使用ajaxSubmit()提交表单示例

    来源: 互联网  发布时间:2014-08-25

    本文导语:  ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示: 代码如下: 那么,如何通过ajaxSubmit(obj)提交数据呢?首先我们需要一个form: XHTML 代码如下:    标题:    内容: ...

ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示:

代码如下:



那么,如何通过ajaxSubmit(obj)提交数据呢?首先我们需要一个form:

XHTML

代码如下:


    标题:

    内容:

    提交



上面是一个需要提交内容的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; // 阻止表单自动提交事件
    });
});

    
 
 

您可能感兴趣的文章:

  • jQuery表单验证插件 jQuery.validity
  • jQuery 表单插件 jQuery.formLocalStorage
  • jQuery表单生成插件 jquery-form
  • jQuery表单插件 jQuery.form
  • jQuery form表单reset按钮重置清空表单的实现代码
  • 表单验证插件 Jquery表单验证插件
  • jQuery表单验证插件 validVal
  • jQuery表单插件 jFormer
  • 使用jQuery重置(reset)表单的方法
  • jQuery如何获取与设置表单元素
  • jQuery提交多个表单的小例子
  • jquery form表单如何序列化为对象
  • jQuery可伸缩的反馈表单 Contactable
  • jQuery表单美化和验证插件 Formly
  • jQuery表单校验插件 VanadiumJS
  • jQuery表单插件 jNice
  • jquery easyui表单重置扩展思路
  • jQuery中验证表单提交方式及序列化表单内容的实现
  • 点击表单提交时出现jQuery没有权限的解决方法
  • jQuery表单验证插件 Validation
  • jQuery定时器插件 jQuery Timers应用示例
  • jquery打开dialog的简单示例
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery设置input type值示例
  • jquery弹窗代码示例
  • jquery easyui表单重置扩展思路 iis7站长之家
  • jquery获取第几个元素方法示例 jquery选择器
  • jquery遍历checkbox简单示例
  • jquery动态添加option示例
  • Jquery定时器的简单示例
  • JQuery获取上传文件大小(示例)
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery ajaxSubmit 异步提交的简单实现
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3