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 >
<div class="form-group">
<label for="username">用户名:</label>
<input type="email" class="form-control" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" placeholder="请输入密码">
</div>
<button class="btn btn-block btn-primary" > 登录系统 </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 >
<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" >
<form 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" 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" >
<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" >广告费</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 type="file" name="files[]"/>
</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<div 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' class="form-control" 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" >
<option>请选择如何验证受众看了你的广告</option>
<option value='1'>1.留言</option>
<option value='2'>2.抄写关键词</option>
<option value='1'>3.小游戏（未开放）</option>
</select>
</div>
</div>
<div class="form-group" >
<div class="col-sm-12">
<input name='key' type="text" class="form-control" placeholder="请设置关键词"/>
<span class="help-block">受众发送相同的关键词才能通过你的广告效果验证，最多10个字。</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button 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>