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 () {
                    //失败
                }
            });
        }
 
    });