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只能傳遞文本類信息;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM