结合bootstrap与后端CI框架的网站开发(一)
CI框架是一套基于MVC的后端框架，历史比较就远了，非常轻量级，对于一些小网站的开发已经绰绰有余。不过我仅对VIEW层，也就是前端部分进行记录。如有错误，希望得到指正啊啊啊~~
一直想对数据交互做个总结，所以我把数据交互放在最开头。大家所熟知的数据提交方式有两种，一种是表单提交，一种是AJAX。
一、表单提交
我直接拿Bootstrap上面的代码来举个栗子，小修改一下~
<form action="admin/search" method="post" onsubmit="return formsubmit()"> <div class="form-group"> <label for="Email1">Email address</label> <input type="email" class="form-control" id="Email1" placeholder="Email" name="email"> </div> <div class="form-group"> <label for="Password1">Password</label> <input type="password" class="form-control" id="Password1" placeholder="Password" name="password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
form表单，写好action，就是我们要提交过去的地址，写好method，就是提交方式，post相对于get来说安全一点。每个input必须写上name,因为后端靠这个来取数据，而input里面的value就是传给后端的值。其实不写label标签没什么影响，毕竟传数据和label无关嘛。后面加个button,type一定要submit，这样才能提交数据。当然，我们这样写也可以：
<input type="submit" class="btn btn-default" value="提交">
所以表单提交非常的简单，但是总会出现各种情况：
（1）最常见的，表单验证。有的后端框架带有表单验证的，但是前端角度而言，这时候可以写个 onsubmit 事件啦~ 该事件是在表单提交的时候发生，return false 以后表单就提交不成功。
function formsubmit(){
var goods_name= $("#goods_name").val();
if(''==goods_name || null==goods_name){
alert('商品名称还未添加。');
return false;
}
}
或者直接在input标签上添加onclick事件，注意此处的type="button"，表示它只是个普通的按钮
<input type="button" value="提交" onclick="check_submit('#form')" />
function check_submit(node)
{
node = node ? node : document ;
item = $(node).find(':checkbox:checked');
if (!item || item==undefined || item.length<1) {
alert('没有选中项');
return false;
}
$('#form').submit();
}
（2）如果后端需要判断我们提交的是哪个表单再去获取不同的值进行处理。我们可以这样写：
<input type="submit" value="查询"/> <input type="hidden" name="act" value="search" />
写个input隐藏起来，这样我们同样把name="act"提交过去了，后端看到这个act是search，就知道我们现在是要进行查询的操作。
二、AJAX提交
现在大部分网站都采用的是AJAX提交和获取数据，毕竟异步加载能让用户体验更好。
首先我们不需要再写name啦~ 只要能拿到对应的value就行了，提交按钮写成这样，表示它就是个普通按钮，我们需要加一个onclick事件，
<button type="submit" class="btn btn-default" onclick="bind(this)" >Submit</button>
function bind(obj)
{
var card_number = $('#card_number').val();
$.ajax({
type: 'post',
url: 'font/home/join?act=bind',
data: {
'Card_number': card_number
},
dataType:'json',
success: function(data) {
Message=data.message;
alert('操作成功！');
},
error:function(data){
alert("提交失败！");
}
});
}
这就是最简单的AJAX的写法，在此不做过多解释，看看就能懂啦~后端获取的是Card_number的值，所以我们将card_number以json的格式表示成Card_number的值。当然啦，我们都知道AJAX提交以后页面是不会跳转的，如果希望跳转到指定页面，特别是带参数的，我们要怎么办呢，
在success里加上这句话就搞定啦~~
document.location.href="font/home/preview?card_number="+card_number+"&wechat_number="+wechat_number;
当success以后，我们需要获取后端传递过来的一些json数据，比如：var data={'message':'all_right'，'act':'bind'}，我们只需要拿到其中的message的内容就行了，写法是date.message，所以得到的值为'all_right'。
三、CI框架的数据获取
其实通过框架直接拿数据是非常简单方便的，有时候甚至比AJAX还要方便啊~ 其实我们的VIEW层面上也是PHP文件，只是被当做HTML来写。所以我在view上写php的内容也不奇怪了。
<p>card_discount：
<?php
if(isset($user)){
if (count($user)>0) {
$array = (array)$user[0];
echo $array['card_discount'];
}
}?>
</p>
可以看到这里我在P标签里嵌套了一个小php，$user是后端直接传过来的数据，数据格式是stdclass，其实就是PHP的一个基类，将其实例化后传递数据，具体怎么使用数据要看后端传过来的数据格式。你把它echo 出来就知道怎么回事啦~或者print_r()打印出来。