快捷搜索:

怎么着精晓jQuery中的ajaxSubmit方法,表单完全战术

作者: w88官方网站手机版  发布:2019-05-25

壹,无刷新页面提交

译自:

版权注解:本文为博主原创文章,转发请标明:www.cnblogs.com/gdsblog

 一.form表单在交付后会自动跳转页面,为了防止跳转,达成无刷新页面提交,能够由此三个藏匿的iframe完毕,把form表单的target设置为iframe的name名称,
form提交目的位当前页面iframe则不会刷新页面

简介
jQuery Form Plugin能够省事且隐式地利用AJAX更始HTML表单(Form)。重要的函数ajaxForm和ajaxSubmit从表单成分中搜罗新闻然后决定怎么样保管提交过程。这五个函数都帮助广大的选项,它们得以使您完全调控数据的交由形式。用AJAX提交表单再未有jQuery Form Plugin更便宜的了。

恰巧学习中,使用到了ajaxSubmit,犹豫在此之前从未接触㢧这几个,所以刚早先是1脸懵逼状态,最终经过寻觅资料的法子,化解了那些标题那么些很欢喜,做到了页面的无刷新上传图片,送给看自个儿天涯论坛的意中人一句话:“山高人为峰,努力定成功!”

*注:使用form表单进行上传文件必要为form增多enctype="multipart/form-data" 属性,除外还索要将表单的付出方法改成post,
一般来说 method="post", input type的品类供给设置为file

支付那么些插件经过了一个集体的卖力,许多少人工它进献各个难点和代码:

上边小编对ajaxSubmit做一下总计:

  enctype 属性规定在将表单数据发送到服务器以前如何对其进展编码,在应用文件上传控件时,必须插足该属性。

John Resig、Mike Alsup、Mark Constable、Klaus Hartl、Matt Grimm、Yehuda Katz、Jörn Zaefferer、Sam Collett、Gilles van den Hoven、Kevin Glowacz、Alex Andrienko

一.jQuery引进进去;

<form action="/admin/updateAdvertDetail" method="post" target="display_none" enctype="multipart/form-data"onsubmit="return check()">

<input type="file" name="name"/>

<input type="text" name="name"/ class="txt">

<input type="submit" value="提交"/>

</form>  

<iframe name="display_none" style="display:none"></iframe> 

敏捷入门
1.在页面中插足表单。没有需求出席新鲜的号子,仅仅是三个符合规律化的表单:

贰.互连网下载jQuery Form插件;

*注:在本人利用form表单提交跳转空iframe框架的时候,出现了文件传输战败的景况,而且这种传输战败的情况很偶尔(注:文件上传大小未有限定),下图是,传输失利时的截图,图片展现有的时候是大文件不可能上传,一时候小文件不只怕上传,小编曾经感到是前台js代码难点,找了1圈下来也没找到难点,为了缓解那个,使用ajaxSubmit()上传,但或许是因为本人项目中引用的js文件与它抵触,一向展现提交失利,只可以先放任那几个主意。

<form id="myForm" action="comment.php" method="post">
    Name: <input type="text" name="name" />
    Comment: <textarea name="comment"></textarea>
    <input type="submit" value="Submit Comment" />
</form>
贰.带有jQuery和jQuery Form Plugin的台本文件,然后在DOM加载后使用简便的脚本来初步化表单:

(这里对form插件做一下介绍,因为刚开首做前端的人不自然能懂,

最后发掘原本是因为后台从未对文件传输后张开操作,最终举行重定向再次回到当前页面,才把标题消除。

<html>
<head>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>

jQuery Form插件是3个精美的Ajax表单插件,能够特别轻便地、无侵入地晋级HTML表单以支持Ajax。jQuery Form有八个宗旨措施 -- ajaxForm() 和 ajaxSubmit(), 它们会集了从调控表单成分到调节如何保管提交进度的魔法。别的,插件还包罗别的的一些形式: formToArray()、formSerialize()、田野先生Serialize()、田野Value()、clearForm()、clearFields() 和 resetForm()等。

图片 1

    <script type="text/javascript">
        // 等待DOM加载
        $(document).ready(function() {
            // 绑定"#myForm",然后进入回调函数
            $('#myForm').ajaxForm(function() {
                alert("Thank you for your comment!");
            });
        });
    </script>
</head>
...
当表单被交给时,name和comment字段会被post到comment.php。如若服务器再次回到成功景观,用户将抽出”Thank you for your comment!”的消息。

下载地址:

图片 2

下载
可以点击这里下载 只怕访问这里 。

基本措施 -- ajaxForm() 和 ajaxSubmit()

 

jQuery Google Group( )提供了对jQuery Form Plugin的帮助,那是个很活泼的论坛,大多的jQuery开拓者和用户都订阅了它。

贰,达成form的ajax提交(表单提交ajaxForm和ajaxSubmit的用法和分裂)

jQuery Form Plugin的API
jQuery Form Plugin的API提供了各个艺术来决定表单的数额以及表单的付出。

③.首先说用法,ajaxForm和ajaxSubmit都可以接收0或三个参数,该参数能够是贰个变量、八个对象或回调函数,这么些指标重要有以下参数:

  一.第3要下载jquery.form.js,这几个网络有,大家自行下载

•ajaxForm ———— 为将在付出的表单绑定要求的事件处理函数。这些函数不提交表单。一般是当DOM加载后即调用ajaxForm来希图AJAX提交。ajaxForm的参数可选。唯1的参数能够是二个回调函数恐怕是二个选项对象(Options)。能够链式调用,即重回调用对象自己。可认为ajaxForm传递标准的$.ajax() 的选项。

var object= {
                     url:url,      //form提交数据的地点
        type:type,     //form提交的章程(method:post/get)
        target:target,  //服务器重临的响应数据显示的要素(Id)号
                      beforeSerialize:function(){} //系列化提交数据从前的回调函数
        beforeSubmit:function(){},  //提交前进行的回调函数
        success:function(){},       //提交成功后施行的回调函数
                      error:function(){},             //提交失利实施的函数
        dataType:null,       //服务器重返数据类型
        clearForm:true,       //提交成功后是或不是清空表单中的字段值
        restForm:true,        //提交成功后是或不是复位表单中的字段值,即恢复生机到页面加载时的景观
        timeout:五千         //设置请求时间,超越该时间后,自动退出请求,单位(微秒)。  

  二.以此插件的首要用途就是支撑ajax表单提交和ajax文件上传。

示例:

}

  三.三个入眼的API:ajaxForm() ajaxSubmit()。

$('#myFormId').ajaxForm();
•ajaxSubmit ———— 马上通过AJAX提交表单。最广大的是当用户点击提交按键时调用。ajaxSubmit的参数同ajaxForm。一样能够链式调用。其参数一样可为$.ajax()的选项。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>权限信息展示
 5     </title>
 6     <link href="~/Content/JqueryEasyUi/themes/default/easyui.css" rel="stylesheet" />
 7     <link href="~/Content/JqueryEasyUi/themes/icon.css" rel="stylesheet" />
 8     <script src="~/Content/JqueryEasyUi/jquery-1.8.3.min.js"></script>
 9     <script src="~/Scripts/myjqueryform.js"></script>//这里引入
10     <script src="~/Content/JqueryEasyUi/jquery.easyui.min.js"></script>
11     <script src="~/Content/JqueryEasyUi/locale/easyui-lang-zh_CN.js"></script>
12     <script src="~/Scripts/datapattern.js"></script>
13     <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
14     <script type="text/javascript">
15         $(function () {
16            
17             //绑定异步上传图片
18             bindUpLoad();
19 
20         });
21 
22         //绑定异步上传图片
23         function bindUpLoad() {
24             alert("aaaaa");
25             $("#btnUpLoadFile").click(function () {
26                 alert("bbbbb");
27                 $("#AddDiglogDiv form").ajaxSubmit({
28 
29                     url: '/ActionInfo/UploadImg',
30                     type: "Post",
31                     success: function (data) {
32                         alert("ccccc");
33                         //将返回的数据加载到隐藏域
34                         $("#IconImg").val(data);
35                         $("#ShowImgDiv").html("<img src='"   data   "' style='width:100px; height:80px'/>");
36 
37                     }
38                 });
39 
40             });
41         }

  四.ajaxForm和ajaxSubmit都能够接收0或二个参数,该参数能够是八个变量、一个目的或回调函数,那么些目的首要有以下参数:

示例:

HTML代码是那样的:

  var object= {
                     url:url,      //form提交数据的地点
        type:type,     //form提交的法门(method:post/get)
        target:target,  //服务器再次来到的响应数据展现的因素(Id)号
                      beforeSerialize:function(){} //类别化提交数据在此之前的回调函数
        beforeSubmit:function(){},  //提交前实施的回调函数
        success:function(){},       //提交成功后实践的回调函数
                      error:function(){},             //提交退步实施的函数
        dataType:null,       //服务器重临数据类型
        clearForm:true,       //提交成功后是还是不是清空表单中的字段值
        restForm:true,        //提交成功后是或不是重新初始化表单中的字段值,即恢复到页面加载时的意况
        timeout:伍仟         //设置请求时间,超越该时间后,自动退出请求,单位(飞秒)。  

// 为表单的付出事件绑定事件管理函数
$('#myFormId').submit(function() {
    // 提交表单
    $(this).ajaxSubmit();
    // 重回false以免止浏览器的暗中同意操作,即刷新页面包车型地铁付出格局
    return false;
});
•formSerialize ———— 将表单数据连串化成查询字符串。这些函数将重临以下格式:name一=value一&name2=value二。不可链式调用,这几个函数重回字符串。

<body>
    <!-------------添加对话框 start--------------------->
    <div id="AddDiglogDiv">
        @using (Ajax.BeginForm("AddActionInfo", "ActionInfo", new AjaxOptions() { OnSuccess = "afterAdd" }))
        {
            <table>
                <tr>
                    <td>权 限 名:</td>
                    <td>
                        <input type="text" name="ActionName" /></td>
                </tr>
                <tr>
                    <td>Url:</td>
                    <td>
                        <input type="text" name="Url" /></td>
                </tr>
                <tr>
                    <td>Http方法类型:</td>
                    <td>
                        <select name="HttpMethod">
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td>是否是菜单:</td>
                    <td>
                        <input type="checkbox" id="ckbIsMenuShow" value="true" name="IsMenu" /></td>
                </tr>
                <tr id="trMenuAdress">
                    <td>菜单图片地址:</td>
                    <td>
                        <input type="hidden" id="IconImg" name="IconImg" />
                        <input type="file" id="fileMenuIcon" name="fileMenuIcon" />
                        <input type="button" value="上传" id="btnUpLoadFile" />
                        <div id="ShowImgDiv"></div>
                    </td>
                </tr>
                <tr>
                    <td>排 序:</td>
                    <td>
                        <input type="text" name="Sort" /></td>
                </tr>
                <tr>
                    <td>备 注:</td>
                    <td>
                        <input type="text" name="Remark" /></td>
                </tr>
            </table>
        }
    </div>
    <!-------------添加对话框 end --------------------->


</body>
</html>

  };

示例:

 最后要造成的花色是这么的:

  $(function(){
       $("form").ajaxForm(object);
     })

var queryString = $('#myFormId').formSerialize();

图片 3

// 这几个数据未来得以由此$.get, $.post, $.ajax等来交付
$.post('myscript.php', queryString);
•田野同志Serialize ———— 将字段数据连串化成查询字符串。当只必要体系化表单的①部分时,那几个函数很有益。这些函数重返以下格式的字符串: name一=value一&name二=value贰。不可链式调用。

末段自身成功的贯彻了异步无刷新上传图片的效应!

示例:

版权申明:本文为博主原创作品,转发请标记:www.cnblogs.com/gdsblog  纵然您有平等的吸引,招待和本身切磋!

var queryString = $('#myFormId .specialFields').fieldSerialize();
•田野同志Value ———— 重返1个数组,包涵钦命成分的值。在.玖一版中,那几个艺术总是回到数组。假若未有管用的值能够分明,这一个数组将是空的,反之它将包括2个或七个值。不可链式调用。

示例:

// 获取密码控件的值
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' value[0]);
•resetForm ———— 通过调用原始的DOM方法来重新恢复设置表单到原始状态。可链式调用。

示例:

$('#myFormId').resetForm();
•clearForm ———— 清空表单成分。这么些函数清空全体文本框,密码框,textarea成分,裁撤select成分和单选框多选框的精选。可以链式调用。

示例:

$('#myFormId').clearForm();
•clearFields ———— 清空表单成分。当只必要清空表单的某部(些)成分时,那么些方法很有利。可链式调用。

示例:

$('#myFormId .specialFields').clearFields();
ajaxForm 和 ajaxSubmit 的选项
而外以下列出的选项,你也得以给那四个函数传递规范$.ajax的选项。

•target ———— 钦定页面中的哪些因素用于响应服务器端的翻新。这一个值能够是jQuery查询字符串,只怕它钦点的jQuery对象,大概是DOM成分。暗中认可值:null

•replaceTarget ———— 协作target选项应用。当被安装为true时,target内定的一些将被替换,否则只替换它的剧情。暗中同意值:false

•url ———— 钦定数量要付出到的UWranglerL。暗许值:表单的action属性值

•type ———— 内定表单提交的办法:’GET’可能’POST’。暗中认可值:表单的method属性值(若无则为’GET’)

•data ———— 要同表单一齐交给的附加数据,格式:data: { key一: ‘value一′, key2: ‘value二′ }

•dataType ———— 服务器响应的数据类型,值可认为:null, ‘xml’, ‘script’, 恐怕’json’。这一个选项钦命服务器端的响应如何管理。它间接照射到了jQuery.httpData方法。要是dataType为’xml’,则服务器的响应将被作为是XML,’success’回调函数将被传到responseXML的值。倘诺dataType为’json’,则服务器的响应将被看作是JSON对象(通过eval),并传给’success’回调函数。如若dataType为’script’,则服务器的响应将被eval成全局上下文。暗中认可值:null

•beforeSerialize ———— 表单类别化前的回调函数。它提供了2个机遇以在值被拿走前决定表单。当中的三个参数是表单的jQuery对象,另3个是传给ajaxForm/ajaxSubmit的挑叁拣4对象。默许值:null

beforeSerialize: function($form, options) {
    // 再次回到false将吊销提交操作
}
•beforeSubmit ———— 表单提交前的回调函数。一般用来拍卖表单提交前的逻辑,如验证表单数据。即使那几个回调函数再次回到false,提交操作将被撤销。它的八个参数分别是表单数据整合的数组,表单的jQuery对象,传给ajaxForm/ajaxSubmit的精选另一半。暗中认可值:null

beforeSubmit: function(arr, $form, options) {
    // 第3个参数的格式:
    // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

    // 重返false将注销提交操作
}
•success ———— 表单被成功交付后,服务器端发生响应时的回调函数。它将被流传以下参数:

  1. responseText 或然 responseXML 的值(取决于dataType选项的值)

  2. statusText

3. xhr(XMLHttpRequest对象)(若jQuery的版本小于一.四,则为jQuery封装过的表单元素)

  1. jQuery封装过的表单成分(若jQuery的版本小于1.四,则为undefined)

默认值:null

•semantic ————— 钦命提交的数码是还是不是听从语义上的逐一(较常规艺术慢)。注意一般情状下表单的体系化都遵守语义上的各类,除非有image类型的控件。唯有当服务器对交付的数据的语义上的逐条有严峻必要而且表单含有image类型的控件时才设置为true。暗中同意值:false

•resetForm ———— 当成功交付时是还是不是重新初始化表单。默许值:null

•clearForm ———— 当成功交付时是否清除表单。默许值:null

•iframe ———— 是或不是总是将服务器的响应放在iframe里面。私下认可值:false

•iframeSrc ———— 假如iframe选项为true,则要增添到iframe中的src属性。默许值:about:blank,使用https协议的页面包车型客车默许值为:javascript:false

•forceSync ———— 钦定是不是在上传文件或许接纳iframe选项提交表单时去除短期的推迟。那几个延迟用于浏览器在进展原始的交付操作前渲染DOM。通过它给用户提醒如”请稍候”,那革新了可用性。默许值:false

选料示例:

// 筹划选项对象
var options = {
    target:     '#divToUpdate',
    url:        'comment.php',
    success:    function() {
        alert('Thanks for your comment!');
    }
};

// 把选取对象传递给ajaxForm函数
$('#myForm').ajaxForm(options);
示例
官方网站上提供了丰裕的演示,参见:

此外细节
•jQuery Form Plugin包容jQuery v1.三.2及其更新的本子。

•它不借助别的插件。

•它既快又准,以至比Prototype和dojo都好,以下是三个比照:

•它通过了多量的单元测试以证实其强硬功用,点击这里开始展览测试:

•它同样帮助文件的上传。

本文来源CSDN博客,转发请标注出处:


本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:怎么着精晓jQuery中的ajaxSubmit方法,表单完全战术

关键词: www.w88985.c