哪些知道jQuery中之ajaxSubmit方法

版权声明:本文也博主原创文章,转载请标注:www.cnblogs.com/gdsblog

正要上中,使用及了ajaxSubmit,犹豫以前尚未碰㢧这个,所以刚刚开头是均等面子懵逼状态,最后经查找资料之章程,解决了这题目是特别兴奋,做到了页面的无刷新高达污染图片,送给看本身博客园的情人一样句子话:“山高人为峰,努力定成!”

下面我本着ajaxSubmit做一下总结:

1.jQuery引入进去;

2.网上下载jQuery Form插件;

(这里对form插件做一下介绍,因为刚刚开头开前端的人头非肯定能够懂得,

jQuery
Form插件是一个良之Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery
Form有少数个为主措施 — ajaxForm() 和 ajaxSubmit(),
它们集合了自控制表单元素到控制如何保管提交进程的效益。另外,插件还包其他的一部分术:
formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields()
和 resetForm()等。

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

主导措施 — ajaxForm() 和 ajaxSubmit()

3.率先说之所以法,ajaxForm和ajaxSubmit都足以接收0或1个参数,该参数可以是一个变量、一个靶要回调函数,这个目标主要发生以下参数:

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:6000        
//设置请求时,超过该日后,自动退出请求,单位(毫秒)。  

}

 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>

 最终只要到位的项目是这般的:

终极自成之贯彻了异步无刷新高达污染图片的力量!

版权声明:本文为博主原创文章,转载请标注:www.cnblogs.com/gdsblog
 如果你发出同样的困惑,欢迎和我探讨!

相关文章