9、判断是否Ajax提交与错误页面定制

阅读() @2018-07-15 14:13:38

还是一个前端表单提交数据的小案例,上次使用form表单提交,这次使用ajax异步提交。

1、PHP代码:

<?php
    //前台首页控制器
    class IndexAction extends Action{
        //显示模板
        public function index(){
            $data = M('hope')->select();
            $this->assign('hope',$data);
            $this->display('index');
        }
        //后台数据校验
        public function validate(){
            if(!IS_AJAX){
                halt('发生错误,请重新提交');
            }else{
                $title = I('title');
                $content = I('content');
                if($title!=''&&$content!=''){
                    $data = array(
                        'title'=>$title,
                        'content'=>$content,
                        'time'=>date('Y-m-d H:m:s',time())
                    );
                    if(M('hope')->data($data)->add()){
                        echo 'ok';
                    }else{
                        echo 'error';
                    }
                }
            }
        }
    }

2、HTML部分:

<!-- 开始许愿按钮 -->
<div class="hopeBtn">开始许愿</div>
<!-- 提交愿望form表单 -->
<div class="hopeForm">
	<p>
		<label>标题:</label>
		<input type="text" name="title" />
	</p>
	<p>
		<label>内容:</label>
		<input type="text" name="content" />
	</p>
	<input type="button" name="btn" value="提交" />
</div>
<!-- 愿望展示 -->
<table cellpadding="0" cellspacing="0">
	<thead>
		<tr>
			<td>ID</td>
			<td>标题</td>
			<td>内容</td>
			<td>时间</td>
		</tr>
	</thead>
	<tbody>
		<foreach name="hope" key="key" item="value">
		<!-- <tr>
			<td>{$value.id}</td>
			<td>{$value.title}</td>
			<td>{$value.content}</td>
			<td>{$value.time}</td>
		</tr>	 -->
		<tr class="a{:mt_rand(1,5)}">
			<td>{$value['id']}</td>
			<td>{$value['title']}</td>
			<td>{$value['content']}</td>
			<td>{$value['time']}</td>
		</tr>	
		</foreach>
	</tbody>
</table>

3、CSS部分:

.hopeBtn{width:100px;height:30px;text-align:center;line-height:30px;background:#f00;color:#fff;font-size:14px;cursor:pointer;;margin-bottom:20px;}
.hopeForm{display:none;margin-bottom:20px;}
td{height:30px;line-height:30px;padding:0px 10px;border:1px solid #ccc;}
.a1{color:red;}
.a2{color:orange;}
.a3{color:yellow;}
.a4{color:green;}
.a5{color:blue;}

4、JavaScript部分:

/* 定义变量 */
var $hopeBtn = $('.hopeBtn');
var $hopeForm = $('.hopeForm');
var $btn = $('input[name=btn]');

/* 执行方法 */
$hopeBtn.click(formShow);
$btn.click(formValidate);

/* 定义方法 */
//表单显示
function formShow(){
	$hopeForm.fadeIn('slow');
}
//表单数据校验
function formValidate(){
	var $title = $('input[name=title]');
	var $content = $('input[name=content]');
	var postUrl = '{:U('Index/Index/validate','',false,false)}';
	if($title.val()==''||$title.val()==null){
		alert('标题不能为空!');
		$title.focus();
		return;
	}
	if($content.val()==''||$content.val()==null){
		alert('内容不能为空!');
		$content.focus();
		return;
	}
	$.ajax({
		url : postUrl,
		type : 'POST',
		data : {
			'title' : $title.val(),
			'content' : $content.val()
		},
		success : function(message){
			if(message=='ok'){
				alert('发送成功');
			}else{
				alert('发送失败');
			}
		}
	});
}

(完)!

微信二维码
锐壳主机