zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Groovy Urlencode编码
    PowerShell导入自定义公共函数
    Groovy获取对象类型、属性
    adb名称操作模拟器
    《坚不可摧》——乔布斯演讲
    马拉松节奏跑(转载)
    马拉松配速
    什么是思考力三要素?(转载)
    Python解析JSON为实体
    excel宏的用法
  • 原文地址:https://www.cnblogs.com/shaoing/p/7759789.html
Copyright © 2011-2022 走看看