zoukankan      html  css  js  c++  java
  • form表单提交回调函数

    form表单没有回调函数,不过可以通过jquery-form.js这个插件来实现回调函数:

    <form id="addform" class="form-horizontal" method="post" action="请求接口地址" enctype="multipart/form-data" target="rfFrame">
                  <div class="box-body">
                     <div class="form-group">
                      <label for="customName" class="col-sm-2 control-label">广告包名称</label>

                      <div class="col-sm-6">
                        <input type="text" class="form-control" name="customName" id="customName" placeholder="广告包名称">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="limited" class="col-sm-2 control-label">日限量</label>

                      <div class="col-sm-6">
                        <input type="text" class="form-control" name="limited" id="limited" placeholder="每日下载次数">
                      </div>
                    </div>
                      <div class="form-group">
                      <label for="file" class="col-sm-2 control-label">URL地址</label>

                      <div class="col-sm-6">
                            <input type="file"  name="file" id="file">
                      </div>
                    </div>              
                  <!-- /.box-body -->
                <div class="form-group">
                 <label for="submit" class="col-sm-2 control-label"></label>
                    <div class="col-sm-2">
                        <button type="button" id="submit" class="btn btn-primary">提交</button>
                    </div>
                  </div>
                  <!-- /.box-footer -->
                </form>

    <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>  

    注意:target="rfFrame"调取的是下面这个iframe的id值。作用是为了提交表单时防止页面跳转;表单要上传文件时需设置属性enctype="multipart/form-data",具体原因不太清楚;

    好了,现在要上jquery-form.js 的提交代码了:

    $("#submit").click(function(){
            var options  = {    
                url:请求接口地址,   //同action 
                type:'post',
                beforeSend:function(xhr){//请求之前
                      var index = layer.load(1, {
                          shade: [0.5,'#000'] //0.5透明度的黑色背景
                        });
                  },    
                success:function(data)    
                {   
          
                },

       complete:function(xhr){//请求完成
                           layer.closeAll('loading');
                          //询问框
                            layer.confirm('广告主修改成功!页面将跳转到列表页。', {
                              btn: ['确定'] //按钮
                            }, function(){
                              location.href = "adList.html";//location.href实现客户端页面的跳转 
                            });
                           
                       },
                 error: function(xhr,status,msg){
                         //alert("状态码"+status+"; "+msg)
                         layer.msg('玩命加载中..');

                      }    
                    };    
               $("#addform").ajaxSubmit(options);
            });    

    另外说明一下,如果没有上传文件的话,完全可以使用ajax请求就好了,没必要这么折腾。那也就说明 ajax请求不能够上传文件,ajax只能传递文本类信息;

  • 相关阅读:
    AC自动机【学习笔记】
    SCOI2016 背单词【Trie树,贪心】
    【字符串算法】字典树Trie入门
    USACO 1.3 Name That Number【暴搜】
    MapReduce分组
    MapReduce排序
    博客园添加访问人数统计
    MapReduce的分区
    MapReduce的计数器
    MapReduce部分源码解读(一)
  • 原文地址:https://www.cnblogs.com/AmilyWilly/p/7059253.html
Copyright © 2011-2022 走看看