版权评释:本文为博主原创作品,转发请标注:www.cnblogs.com/gdsblog

刚刚学习中,使用到了ajaxSubmit,犹豫此前从未有过接触㢧那几个,所以刚开首是一脸懵逼状态,最终通过查找资料的艺术,消除了那个题材那么些很提神,做到了页面包车型大巴无刷新上传图片,送给看自个儿今日头条的对象一句话:“山高人为峰,努力定成功!”

上边笔者对ajaxSubmit做一下总括:

1.jQuery引入进去;

2.网上下载jQuery Form插件;

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

jQuery
Form插件是三个名特别降价的Ajax表单插件,能够非凡不难地、无侵入地升高HTML表单以支撑Ajax。jQuery
Form有五个基本措施 — ajaxForm() 和 ajaxSubmit(),
它们集合了从控制表单成分到控制哪些管理提交进度的功力。另外,插件还包含其他的部分方法:
formToArray()、form塞里alize()、田野先生Serialize()、田野(field)Value()、clearForm()、clearFields()
和 resetForm()等。

下载地址: http://malsup.com/jquery/form/#download

着力措施 — ajaxForm() 和 ajaxSubmit()

3.先是说用法,ajaxForm和ajaxSubmit都能够接收0或一个参数,该参数能够是3个变量、二个目的或回调函数,那些目的主要有以下参数:

var object= {
                     url:url,      //form提交数据的地址
        type:type,     //form提交的方法(method:post/get)
        target:target,  //服务器再次回到的响应数据展现的成分(Id)号
                      before塞里alize:function(){}
//体系化提交数据在此之前的回调函数
        beforeSubmit:function(){},  //提交前履行的回调函数
        success:function(){},      
//提交成功后举办的回调函数
                      error:function(){},            
//提交败北执行的函数
        dataType:null,       //服务器重临数据类型
        clearForm:true,      
//提交成功后是不是清空表单中的字段值
        restForm:true,       
//提交成功后是或不是重置表单中的字段值,即恢复生机到页面加载时的情景
        timeout:伍仟        
//设置请求时间,超过该时间后,自动退出请求,单位(微秒)。  

}

 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         }

HTML代码是那样的:

<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>

 最后要马到功成的类别是那般的:

jQuery 1

末尾小编成功的贯彻了异步无刷新上传图片的效率!

版权申明:本文为博主原创文章,转发请标注:www.cnblogs.com/gdsblog
 借使您有平等的可疑,欢迎和本人讨论!

相关文章

网站地图xml地图