微擎开发之ajax序列化提交表单信息给后端php处理返回结果
我们在前端html代码中定义表单form的id，然后将微擎提交按钮type=submit改为type=button，这是ajax提交的处理方法，代码如下：<form action="" method="post" class="form-horizontal form" enctype="multipart/form-data" id="levelform"><div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label class="col-xs-12 col-sm-2 col-md-1 control-label">分类层级</label>
<div class="col-sm-9 col-xs-12">
<label class='radio-inline'>
<input type='radio' name='islevel' value='1' {if $level['islevel']==1 || empty($level['islevel'])}checked{/if} /> 一级
</label>
<label class='radio-inline'>
<input type='radio' name='islevel' value='2' {if $level['islevel']==2}checked{/if} /> 二级
</label>
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-2 col-md-1 control-label">显示样式</label>
<div class="col-sm-9 col-xs-12">
<label class='radio-inline'>
<input type='radio' name='istype' value='0' {if $level['istype']==0}checked{/if} /> 圆形
</label>
<label class='radio-inline'>
<input type='radio' name='istype' value='1' {if $level['istype']==1}checked{/if} /> 方形
</label>
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-2 col-md-1 control-label">分类广告</label>
<div class="col-sm-9 col-xs-12">
{php echo tpl_form_field_image('thumb', $level['thumb'])}
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-2 col-md-1 control-label">分类广告链接</label>
<div class="col-sm-9 col-xs-12">
<input name="linkurl" class="form-control" value="{$level['linkurl']}">
</div>
</div>
</div>
</div>
<div class="form-group col-sm-12">
<input id="submit" type="button" name="submit" value="提交" class="btn btn-primary col-lg-1" />
<input type="hidden" name="token" value="{$_W['token']}" />
</div>
</form>我们在javascript中定义变量接收序列化表单数据，代码如下：
<script>
$(document).ready(function(){
$('#submit').click(function(){
var params = $('#levelform').serialize();
$.ajax({
url: "{php echo $this->createWebUrl('category',array('op'=>'level'))}",
type: "POST",
data: params,
success: function(data){
var data = $.parseJSON(data);
if(data.message.errno != 0) {
util.message(data.message.message);
return false;
}else{
util.message(data.message.message);
return false;
}
}
});
});
});
</script>我们在后端php代码处理数据，代码如下：
if($_W['isajax']){
$data = array(
'uniacid'=>$_W['uniacid'],
'islevel'=>$_GPC['islevel'],
'istype'=>$_GPC['istype'],
'thumb'=>$_GPC['thumb'],
'linkurl'=>$_GPC['linkurl'],
);
if(empty($level)){
$inst = pdo_insert('wc_teacher_category_level', $data);
if($inst){
message(error(0, '设置成功'), '', 'ajax');
}else{
message(error(-1, '设置失败，请重试！'), '', 'ajax');
}
}else{
$updt = pdo_update('wc_teacher_category_level', $data, array('uniacid'=>$_W['uniacid']));
if($updt){
message(error(0, '设置成功'), '', 'ajax');
}else{
message(error(-1, '设置失败，请重试！'), '', 'ajax');
}
}
}返回给前端的data对象如下：
data.message.errno表示错误代码，正如我们上面php定义的0和1，而data.message.message表示的是上面代码中的error()方法中的文字描述“设置成功”的内容。
跳转的链接内容使用的是data.redirect，而data.type是ajax。
页:
[1]