JS异步表单提交处理
HTML表单
<!--旅游定制-->
<div class="tour">
<div class="wrap">
<h5>旅游定制</h5>
<div class="tour-box">
<div class="bg6"></div>
<form method="post" action="" class="hd-form" id="form" name="form">
<ul class="travel-mian">
<li>
<span style="background: url(__TEMPLATE__/images/icon_user.png) no-repeat 21px center;"><i>姓名 </i></span>
<input class="input name" type="text" name="name" placeholder="填写您的姓名" />
</li>
<li>
<span style="background: url(__TEMPLATE__/images/icon_phone.png) no-repeat 21px center;"><i>手机号码</i></span>
<input class="input phone" type="text" name="phone" placeholder="填写您的手机号码" />
</li>
<li>
<span><i>目的地</i></span>
<input class="input mdd" type="text" name="mdd" placeholder="填写目的地" />
</li>
<li>
<span style="background: url(__TEMPLATE__/images/icon3.png) no-repeat 21px center;"><i>人数</i></span>
<input name="number" class="input number" type="text" placeholder="填写出行人数" />
</li>
<li>
<span style="background: url(__TEMPLATE__/images/icon4.png) no-repeat 21px center;"><i>出行时间</i></span>
<input name="lytime" class="input lytime" type="text" readonly="readonly" id="updatetime" value="" />
</li>
<li>
<label><input type="radio" name="type" value="自驾游" class="dx type" checked="checked"/>自驾游</label>
<label><input type="radio" name="type" value="房车" class="dx type"/>房车</label>
<label><input type="radio" name="type" value="落地自驾" class="dx type"/>落地自驾</label>
</li>
<li style="height: 80px;">
<div class="made">
<p><img src="__TEMPLATE__/images/siren.png"></p>
<a id="msgbtn">立即定制</a>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#msgbtn').click(function(){
var name = $('.name').val();
var phone = $('.phone').val();
var mdd = $('.mdd').val();
var type = $('.type').val();
var number = $('.number').val();
var lytime = $('.lytime').val();
if (name == '') {
layer.msg('姓名不能为空!', {icon: 5});
return false;
}else if(phone == '') {
layer.msg('手机号码不能为空!', {icon: 5});
return false;
}
var reg = /^1\d{10}$/;
var str = phone;
if (!reg.test(str)) {
layer.msg('手机号码不合法!', {icon: 5});
return false;
}
if (mdd== '') {
layer.msg('目的地不能为空!', {icon: 5});
return false;
}
var str="";
//获取单选按钮的值
var radios = document.form.type;
var n = radios.length;
for (var i = 0; i < n; i++) {
if (radios[i].checked) {
str = radios[i].value;
}
}
//发送数据
var index = layer.load(0, {shade: false});
$.post('__WEB__?g=Plugin&a=Dingzhi&c=Index&m=add',{name:name,mdd:mdd,phone:phone,type:str,number:number,lytime:lytime},function(result){
layer.close(index);
if(result['state']==1){
layer.msg(result['message'], {icon: 6});
window.location.href=result['url'];
}
},'json');
});
})
</script>
<!--旅游定制end-->
PHP代码处理部份
public function add(){
if(!IS_AJAX) $this->error('非法请求!');
$_POST['ip'] = Ip::getClientIp();
$_POST['addtime'] = time();
if ($this->_db->create()) {
if ($this->_db->add()) {
$this->ajaxReturn(array('state'=> 1,'message' => ' 留言成功!'));
} else {
$this->ajaxReturn(array('state'=> 0,'message' => ' 留言失败!'));
}
} else {
$this->ajaxReturn(array('state'=> 0,'message' =>$this->_db->error));
}
}
还有一种方法：
例：
<form id="compay" class="i-form" method="post" action="{:U('User/weixin_cash')}" onSubmit="return false;">
<ul class="form-box new_ids{$tpl}">
<li class="f-line clearfix">
<label class="f-label">可提取余额</label>
<em><if condition="$totle.balance eq ''">0 <else/>{$totle.balance}</if>元</em>
<input type="hidden" name="uid" value="{$uid}" id="counts">
</li>
<li class="f-line clearfix">
<label class="f-label">姓名</label>
<input id="name" class="f-input" type="text" placeholder="请输入您的真实姓名" name="name">
</li>
<li class="f-line clearfix">
<label class="f-label">提取金额</label>
<input id="money" class="f-input" type="text" placeholder="请输入金额" name="money">
</li>
</ul>
<input type="submit" value="提 交" class="f-sub">
</form>
var $weixinForm = $('#compay'); //form表单
$weixinForm.submit(function(){
var money = $("#money").val();
var kt_money = {$totle.balance};
if(money<1){
msg('亲，提现金额不能少于1元！');
return false;
}else if(money>kt_money){
msg('提现金额不能大于账户余额！');
return false;
}else{
weixinData = $(this).serialize();
$.ajax({
type: 'POST',
url: '{:U("User/weixin_cash")}',
data: weixinData,
dataType: 'json',
timeout:200000,
success: function (data) {
//data返回数据
//如果是数据列表需要循环，可如下遍历
$(data.list).each(function(index,item){
//index指下标
//item指代对应元素内容
//this指代每一个元素对象
//console.log(obj.bkdata[index]);
console.log(item.title);
//console.log($(this));
});
},
error: function () {
//失败
}
});
}
});
