Ajax序列化表达提交

素颜马尾好姑娘i 2021-09-08 17:10 264阅读 0赞

**普通表单：**

<form class="am-form" method="post" id='myForm' action="">

<input type="text" class="am-input-sm" name="name" placeholder="请输入分类名称">

<div class="am-margin">  
                                <button type="button" οnclick='commitSave()' class="am-btn am-btn-primary am-btn-xs">提交保存</button>  
                                <button type="button" class="am-btn am-btn-default am-btn-xs"  
                                        οnclick="JavaScript:history.back();">返回列表  
                                </button>  
                            </div>  
                        </form>

<script>

function commitSave() \{  
            var name = $("\[name='name'\]").val();  
            if (!name) \{  
                layer.msg("分类名称必填");  
                return false;  
            \}  
            $.ajax(\{  
                type : "POST",  
                url : '\{ \{route("client\_goods\_type\_create")\}\}',  
                data : $('\#myForm').serialize(),  
                async : true,  
                dataType : 'json',  
                error : function(data) \{  
                    layer.msg('请求失败', \{  
                        icon : 5  
                    \});  
                    return false;  
                \},  
                success : function(data) \{  
                    if (data.code == 1) \{  
                        layer.msg('添加成功', \{  
                            icon : 6,  
                            time : 2000  
                        \}, function() \{  
                            window.location.href = "\{ \{route('client\_goods\_type')\}\}";  
                        \});  
                    \} else \{  
                        layer.msg(data.msg, \{  
                            icon : 5  
                        \});  
                    \}  
                \}  
            \});  
        \}  
    </script>

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

**图片表单：**

<form class="am-form" method="post" id='myForm' action='' enctype="multipart/form-data">  
                            <div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">  
                                    <span>标题</span>  
                                </div>  
                                <div class="am-u-sm-8 am-u-md-4">  
                                    <input type="text" class="am-input-sm" name="name">  
                                </div>  
                                <div class="am-hide-sm-only am-u-md-6"></div>  
                            </div>  
                            \{ \{--展示图片--\}\}  
                            <div class="am-g am-margin-top">  
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">图片(建议尺寸750\*230)</div>  
                                <div class="am-u-sm-8 am-u-md-10">  
                                    <div id='show\_img\_div' style='display: none;'>  
                                        <img id="preview-img" src="" width="750" height="230">  
                                    </div>  
                                    <div id="uploader" class="wu-example">  
                                          
                                        <div id="thelist" class="uploader-list"></div>  
                                        <div class="btns">  
                                            <input type="file" name="img" id="img" class="form-control" οnchange="selectFile(this)">  
                                        </div>  
                                    </div>  
                                </div>

</div>  
                            <div class="am-margin">  
                                <button type="button" οnclick='commitSave()' class="am-btn am-btn-primary am-btn-xs">提交保存</button>  
                                <button type="button" class="am-btn am-btn-default am-btn-xs"  
                                        οnclick="JavaScript:history.back();">返回列表  
                                </button>  
                            </div>  
                        </form>

<script type="text/javascript">  
        function selectFile(e) \{  
            // 获取文件名  
            var filetype = e.files\[0\].type;  
            var imgmeta = \['image/png', 'image/jpeg', 'image/jpg'\];  
    　　　　　　   // 判断 后缀校验数组 是否包含上传文件的后缀  
            if(imgmeta.indexOf(filetype) > -1)\{  
                var imgFile = e.files\[0\];    //获取到第一个上传的文件对象,声明全局变量  
                var fr = new FileReader();       //实例FileReader对象  
                fr.readAsDataURL(imgFile);      //把上传的文件对象转换成url  
                fr.onload = function(event) \{  
                    // $("\#img").src = this.result;  
                    var url=this.result;    //上传文件的URL  
                    $("\#preview-img").attr('src',url);  
                    $("\#show\_img\_div").show();  
                \};  
            \}else\{  
                layer.msg("图片格式不正确，请重新选择");  
            \}  
        \}

function commitSave() \{  
            if($('\#img').val() == '')\{  
                layer.msg("请选择图片");  
                return false;  
            \}  
            var formData = new FormData($("\#myForm")\[0\]);  
            $.ajax(\{  
                type : "POST",  
                url : '\{ \{route("client\_banners\_create")\}\}',  
                data : formData,  
                async : true,  
                cache: false,  // 不缓存  
                processData: false,   // jQuery不要去处理发送的数据

contentType: false,  // jQuery不要去设置Content-Type请求头

dataType : 'json',  
                error : function(data) \{  
                    layer.msg('请求失败', \{  
                        icon : 5  
                    \});  
                    return false;  
                \},  
                success : function(data) \{  
                    if (data.code == 1) \{  
                        layer.msg('添加成功', \{  
                            icon : 6,  
                            time : 2000  
                        \}, function() \{  
                            window.location.href = "";  
                        \});  
                    \} else \{  
                        layer.msg(data.msg, \{  
                            icon : 5  
                        \});  
                    \}  
                \}  
            \});  
        \}  
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，264人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax提交数据

第一、页面 <div class="form-horizontal"> <div class="space-4"></div> <div class="space-

爱被打了一巴掌/ 2024年02月17日 21:11/ 0 赞/ 60 阅读

相关表单和POST提交数据序列化，GET不需要序列化

Submit提交表单数据序列化 1. get是将未加密的明文数据追加到url后面提交，post是将未加密的明文数据封装到请求体。所以说这两种方式虽然一个是在url可见一

墨蓝/ 2023年06月27日 15:58/ 0 赞/ 12 阅读

相关 jquery ajax 序列化

-------------------- jquery ajax 序列化应用：将表单序列化，使用ajax传递到后端服务器 \\\\\\\\\\\

女爷i/ 2023年03月04日 09:18/ 0 赞/ 6 阅读

相关 ajax异步提交枷锁,ajax

一、ajax概念： ajax:Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),2005 ajax:

阳光穿透心脏的1/2处/ 2022年09月03日 13:22/ 0 赞/ 182 阅读

相关 jquery序列化表单并ajax提交

1.准备好form表单 <form method="post"> <input type="text" name="username"

女爷i/ 2022年07月12日 06:12/ 0 赞/ 387 阅读

相关 ajax 提交表单序列化

通过serialize()方法得到的值为username=xxx&password=xxx $('submit').click(function(){

亦凉/ 2022年05月28日 12:23/ 0 赞/ 237 阅读

相关 springMVC+AJAX+form序列化

公司最近有需求，要数据提交时的对象绑定,下午测试了几个方法，初步解决相关需求，下面使用springboot快速搭建了一个web项目来进行测试。一.form序列化 >

悠悠/ 2022年05月28日 04:00/ 0 赞/ 191 阅读

相关序列化，反序列化

序列化：对象的序列化主要有两种用途：　　1）把对象的字节序列永久地保存到硬盘上，通常存放在一个文件中；　　2）在网络上传送对象的字节序列。　　

系统管理员/ 2022年05月16日 12:13/ 0 赞/ 400 阅读

相关在用a标签作为提交按钮或者ajax提交表达时required无效的解决办法

1.ajax提交表单时,代码 <form id="sub"> <input type="text" name="name" required />

秒速五厘米/ 2022年05月04日 03:30/ 0 赞/ 343 阅读

相关 Ajax序列化表达提交

普通表单： <form class="am-form" method="post" id='myForm' action=""> <input type="text" cl

素颜马尾好姑娘i/ 2021年09月08日 17:10/ 0 赞/ 265 阅读