使用ajax提交表单有很多优势（下面是一个上传文件的实例 new FormData class）

最新推荐文章于 2024-04-28 15:59:17 发布

cominglately

最新推荐文章于 2024-04-28 15:59:17 发布

阅读量366

点赞数

分类专栏： web 文章标签： php ajax

本文链接：https://blog.csdn.net/cominglately/article/details/76201342

版权

web 专栏收录该内容

135 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <include file="Common@Public/head" />
    <!-- Include Required Prerequisites -->
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
</head>
<body>
<include file="Common@Public/dhb_info" />
<include file="Common@Public/header" />
<div class="panel panel-default">
    <div class="panel-body">
        <form class="form-horizontal" action="{:U('TagBatch/batchHandle')}" id="tel_tag_form">
            <div class="form-group">
                <label class="col-sm-2 control-label" style="margin-right:16px;">号码</label>
                <input type="file" name="tel_list"/>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">标签</label>
                <div class="col-sm-5">
                    <select class="form-control" name="itag_id">
                        <foreach name="tag_list"  item="vo">
                            <option value="<?php  echo $vo['id']?>" ><?php  echo $vo['itag']?></option>
                        </foreach>
                    </select>
                </div>
            </div>
            <div class="form-group" data-toggle="buttons">
                <label class="col-sm-2 control-label" style="margin-right:15px;">操作</label>
                <label class="btn btn-primary active" style="margin-right:40px;">
                    <input type="radio" name="handle_type" id="option1" value="up_line" checked>上线
                </label>
                <label class="btn btn-primary ">
                    <input type="radio" name="handle_type" id="option2" value="down_line">下线
                </label>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button id="smt" type="submit" style="width:50%" class="btn btn-primary  btn-block">上传</button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#tel_tag_form").submit(function(){
            console.log('form submit start');
            event.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                url: $(this).attr("action"),
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (returndata) {
                    alert(returndata);
                }
            });
        });
    });
</script>
</body>
</html>

cominglately

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用ajax提交表单有很多优势（下面是一个上传文件的实例 new FormData class）

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;include file="Common@Public/head" /&gt; &lt;!-- Include Required Prerequisites --&gt; &lt;script type="text/javascript" src=&quo
复制链接

扫一扫