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>
