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

 这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下

ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示:
 
代码如下:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
 
 
那么,如何通过ajaxSubmit(obj)提交数据呢?首先我们需要一个form:
 
XHTML
 
 代码如下:
<form>
    标题:<input type="text" name="title" /><br />
    内容:<textarea name="content"><textarea/><br />
    <button>提交</button>
</form>
 
 
上面是一个需要提交内容的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; // 阻止表单自动提交事件
    });
});

时间: 2025-01-27 13:15:23

jQuery使用ajaxSubmit()提交表单示例的相关文章

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

ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 复制代码 代码如下: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script src="http://malsup.github.io/jquery.form.js"></script>

有没有朋友可以提供asp与AjaxSubmit提交表单的这中类型的源代码呢

问题描述 有没有朋友可以提供asp与AjaxSubmit提交表单的这中类型的源代码呢 就是一个页面是表单,另一个是处理表单信息的asp动态页面,然后用jQuery的Ajaxsubmit函数来提交表单,当然,不是简单的Ajax的形式在地址后面加上表单的特定数据,而是提交整个表单,因为Ajaxsubmit提交表单可以使点击一个图片而不一定是一个提交按钮我在网上找的很多都是asp.net的和PHP的,但就是没有asp的,请问有相关的朋友们有这样的源文件或者源代码吗 解决方案 ajaxSubmit和普通

Jquery.Form 异步提交表单的简单实例

 这篇文章主要介绍了Jquery.Form 异步提交表单的简单实例.需要的朋友可以过来参考下,希望对大家有所帮助 http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#   1. 在你的页面里写一个表单.一个普通的表单,不需要任何特殊的标记:    代码如下: <form id="myForm" method="post" action="/Home/AjaxFor

Jquery中ajax提交表单几种方法(get、post两种方法)_AJAX相关

在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

jQuery使用$.ajax提交表单完整实例_jquery

本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

ajaxSubmit提交表单数据,数据过多报500错误

问题描述 ajaxSubmit提交表单数据,数据过多报500错误 ajaxSubmit提交表单数据,数据过多,用fireBug调试,报500错误.表单中method="post" 解决方案 post 请求方法原则上是没有大小限制的, 更多的原因可能出现在你的参数格式上,比如 数字 整型的确有小数点,日期格式不规范等.最好用排除法 依次添加参数判断是哪个格式有问题 解决方案二: 数据少的时候就是可以提交的 解决方案三: 500服务器错误,你看看是不是配置文件可以设置默认大小了

Jquery中ajax提交表单几种方法(get、post两种方法)

在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

jquery下异步提交表单 异步跨域提交表单_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">&l

jquery实现submit提交表单_jquery

使用jquery的submit()函数提交form表单时,总是无法提交表单.这个问题太诡异了,是因为form中提交表单的input的name属性为submit,把name改成其他的名称,就可以使用了. 表单可以提交之后,又出现了新的问题.由于基于dz开发,表单提交之后使用submitcheck()这个函数来检查表单是否提交,由jquery提交上来的表单始终无法验证通过.最后采用模拟点击提交按钮的方法来实现. 复制代码 代码如下: <!-- lang: js --> $('input#asubm