bootstrap ajax thinkphp5 tp5 serialize 序列化 提交 表單 each 封裝數據


注意加 return false  否則把提交按鈕移到<form>外,不然會刷新頁面

 

 

    $('.list-active').each(function(key,val){

         data[key] = $(this).text();

    });

    data.unshift($('#bespeak').val()); 
    data.unshift($('#time_range').val()); 
    data.unshift($('#gid').val()); 

 

 

<div class='container'>

<div class="panel panel-default">
    <div class="panel-heading">登陸界面</div>
    <div class="panel-body">
            <form id="form">
                <div class="form-group">
                    <label for="username">用戶名:</label>
                    <input id="username" type="email" class="form-control" placeholder="請輸入郵箱">
                </div>
                <div class="form-group">
                    <label for="password">密碼:</label>
                    <input type="password" id="password" class="form-control" placeholder="請輸入密碼">
                </div>
                <button class="btn btn-block btn-primary" id='submit'>  登錄系統  </button>
            </form>
      </div>
    <div class="panel-footer">111111111</div>
</div>

<script type="text/javascript">
$(function(){
    $("#submit").click(function(){
        $.ajax({
            url:"{:url('other/test')}",
            data:{"username":$('#username').val()},
            dataType:"json",
            type:"post",
            success:function(r){
                if(!r){
                   alert("登陸失敗!請重新輸入")
                }else{
                   window.location.href = "{:url('aim/lists')}";
                }
            }
        })
        return false;
    });
})
</script>

</div>

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>

{include file="public/header" }

<link href="/public/static/index/css/jquery.fileupload.css" rel="stylesheet">
<script src="/public/static/index/js/jquery.ui.widget.js"></script>
<script src="/public/static/index/js/jquery.iframe-transport.js"></script>
<script src="/public/static/index/js/jquery.fileupload.js"></script>

<title>新建廣告</title>

</head>
<body>
{include file="public/nav" }

<div class='container'>

    <div class="col-lg-12 panel panel-primary" style="padding-top: 15px;">
       
        <form id="ad" class="form-horizontal">
        
            <div class="form-group">
                <label for="brand" class="col-sm-3 control-label">品牌名稱</label>
                <div class="col-sm-9">
                    <input name='brand' class="form-control" id="brand" placeholder="個人可填自己的名字" value='{$Think.session.user.nickname}' required="required" >
                </div>
            </div>
            
            <div class="form-group">
                <label for="fee" class="col-sm-3 control-label">單價</label>
                <div class="col-sm-9">
                    <select name='fee' class="form-control" id='fee'>
                      <option value='10'>0.1元</option>
                      <option value='20'>0.2元</option>
                      <option value='30'>0.3元</option>
                      <option value='40'>0.4元</option>
                      <option value='50'>0.5元</option>
                      <option value='60'>0.6元</option>
                      <option value='70'>0.7元</option>
                      <option value='80'>0.8元</option>
                      <option value='90'>0.9元</option>
                      <option value='100'>1.0元</option>
                      <option value='200'>2.0元</option>
                      <option value='300'>3.0元</option>
                      <option value='400'>4.0元</option>
                      <option value='500'>5.0元</option>
                    </select>       
                <span class="help-block" id='fee-help' style='display:none;'>廣告費</span>                         
                </div>
            </div>
            
            
                     
            <div class="form-group">
                <label for="fileupload" class="col-sm-3 control-label">廣告圖片</label>
                <div class="col-sm-9">
                
                <span class="btn btn-xs btn-success fileinput-button" data-toggle="tooltip" data-placement="right">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>選擇並上傳...</span>
                   
                    <input id="fileupload" type="file" name="files[]"/>
                    
                </span>

                </div>
            </div>
            
            <div id="progress" class="progress">
                <div class="progress-bar progress-bar-success"></div>
            </div>            
            
            <div id="files" class="files"></div>

            <div class="form-group">
                <label for="content" class="col-sm-3 control-label">廣告內容</label>
                <div class="col-sm-9">
                    <textarea name='ad_content' style="height: 80px;" class="form-control" id="content" placeholder="140字以內" required="required" ></textarea>
                </div>
            </div>

            <div class="form-group">
                <label for="rule" class="col-sm-3 control-label">驗證方式</label>
                <div class="col-sm-9">
                <select name='rule' class="form-control" id='rule'>
                  <option>請選擇如何驗證受眾看了你的廣告</option>
                  <option value='1'>1.留言</option>
                  <option value='2'>2.抄寫關鍵詞</option>
                  <option value='1'>3.小游戲(未開放)</option>
                </select>
                </div>
            </div>

            <div class="form-group" id='rule2' style='display:none;'>
                <div class="col-sm-12">
                    <input name='key' type="text" class="form-control" id='key' placeholder="請設置關鍵詞"/>
                    <span class="help-block">受眾發送相同的關鍵詞才能通過你的廣告效果驗證,最多10個字。</span>
                </div>
            </div>
            
            
            <div class="form-group">
                <div class="col-sm-12">
                    <button id='submit' class="col-xs-12 col-sm-12 col-md-12 col-lg-12 btn btn-success btn-lg"/>保存</button>
                </div>     
            </div>
        </form>   
    </div>
      
</div>



<script>

$(function () {
    'use strict';
    
    
    $("#submit").click(function(){
        $('.alert').hide();

        var formData = $('#ad').serialize();
        $.ajax({
            url:"{:url('user/ad_build')}",
            data:formData,
            dataType:"json",
            type:"post",
            success:function(r){
                if(r.check==1){
                    showPopover($("#submit"),"成功","{:url('ad/lists')}"); 
                }else{
                    showPopover($("#submit"),r.msg); 

                }

            }
        })
        return false;
    });   
    
    
    
    
    
    
    
    $('#fileupload').fileupload({
        url: '{:url("ad/upload")}',
        dataType: 'json',
        done: function (e, data) {
            if(data.result.code==0){
                showPopover($('.fileinput-button'),data.result.msg);return false;
            }

            $.each(data.result, function (index, file) {
                $('<p/>').html("<img src='/public/uploads/"+file.getSaveName+"' class='img-responsive'/> <input type='hidden' name='img' value='"+file.getSaveName+"'/>").appendTo('#files');

                $('#progress').hide();
                
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
        

        
    $('#fee').change(function(){
        $('#fee-help').show();
    })    
    
    $('#rule').change(function(){
        $('#rule2').hide();
        $('#rule3').hide();

        var num = $(this).children('option:selected').val();
        $('#rule'+num).show();//把選中selected的值
    })
    
    function showPopover(target, msg, url=0) {
      target.attr("data-original-title", msg);
      $('[data-toggle="tooltip"]').tooltip();
      target.tooltip('show');
      target.focus();
      //2秒后消失提示框
      var id = setTimeout(
        function () {
          target.attr("data-original-title", "");
          target.tooltip('hide');
          if(url!=0){ window.location.href = url; }
        }, 2000
      );
    } 
    
    


});
</script>



</body>
</html>

 


免責聲明!

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



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