微擎开发之ajax序列化提交表单信息给后端php处理返回结果

admin

我们在前端html代码中定义表单form的id，然后将微擎提交按钮type=submit改为type=button，这是ajax提交的处理方法，代码如下：

1. <form action="" method="post" class="form-horizontal form" enctype="multipart/form-data" id="levelform">
   
2.                 <div class="panel panel-default">
   
3.                         <div class="panel-body">
   
4.                                 <div class="form-group">
   
5.                                         <label class="col-xs-12 col-sm-2 col-md-1 control-label">分类层级</label>
   
6.                                         <div class="col-sm-9 col-xs-12">
   
7.                                                  <label class='radio-inline'>
   
8.                                                          <input type='radio' name='islevel' value='1' {if $level['islevel']==1 || empty($level['islevel'])}checked{/if} /> 一级
   
9.                                                  </label>
   
10.                                                  <label class='radio-inline'>
    
11.                                                          <input type='radio' name='islevel' value='2' {if $level['islevel']==2}checked{/if} /> 二级
    
12.                                                  </label>
    
13.                                         </div>
    
14.                                  </div>
    
15.                                  <div class="form-group">
    
16.                                         <label class="col-xs-12 col-sm-2 col-md-1 control-label">显示样式</label>
    
17.                                         <div class="col-sm-9 col-xs-12">
    
18.                                                 <label class='radio-inline'>
    
19.                                                         <input type='radio' name='istype' value='0' {if $level['istype']==0}checked{/if} /> 圆形
    
20.                                                 </label>
    
21.                                                 <label class='radio-inline'>
    
22.                                                         <input type='radio' name='istype' value='1' {if $level['istype']==1}checked{/if} /> 方形
    
23.                                                 </label>
    
24.                                         </div>
    
25.                                 </div>
    
26.                                 <div class="form-group">
    
27.                                         <label class="col-xs-12 col-sm-2 col-md-1 control-label">分类广告</label>
    
28.                                         <div class="col-sm-9 col-xs-12">
    
29.                                                 {php echo tpl_form_field_image('thumb', $level['thumb'])}
    
30.                                         </div>
    
31.                                 </div>
    
32.                                 <div class="form-group">
    
33.                                         <label class="col-xs-12 col-sm-2 col-md-1 control-label">分类广告链接</label>
    
34.                                         <div class="col-sm-9 col-xs-12">
    
35.                                                 <input name="linkurl" class="form-control" value="{$level['linkurl']}">
    
36.                                         </div>
    
37.                                 </div>
    
38.                         </div>
    
39.                 </div>
    
40.                 <div class="form-group col-sm-12">
    
41.                         <input id="submit" type="button" name="submit" value="提交" class="btn btn-primary col-lg-1" />
    
42.                         <input type="hidden" name="token" value="{$_W['token']}" />
    
43.                 </div>
    
44.         </form>

复制代码

我们在javascript中定义变量接收序列化表单数据，代码如下：

1. <script>
   
2. $(document).ready(function(){
   
3.         $('#submit').click(function(){
   
4.                 var params = $('#levelform').serialize();
   
5.                 $.ajax({
   
6.                         url: "{php echo $this->createWebUrl('category',array('op'=>'level'))}",
   
7.                         type: "POST",
   
8.                         data: params,
   
9.                         success: function(data){
   
10.                                 var data = $.parseJSON(data);
    
11.                                 if(data.message.errno != 0) {
    
12.                                         util.message(data.message.message);
    
13.                                         return false;
    
14.                                 }else{
    
15.                                         util.message(data.message.message);
    
16.                                         return false;
    
17.                                 }
    
18.                         }
    
19.                 });
    
20.         });
    
21. });
    
22. </script>

复制代码

我们在后端php代码处理数据，代码如下：

1. if($_W['isajax']){
   
2.                
   
3.             $data = array(
   
4.                 'uniacid'=>$_W['uniacid'],
   
5.                   'islevel'=>$_GPC['islevel'],
   
6.                   'istype'=>$_GPC['istype'],
   
7.                   'thumb'=>$_GPC['thumb'],
   
8.                   'linkurl'=>$_GPC['linkurl'],
   
9.         );
   
10.               if(empty($level)){
    
11.                 $inst = pdo_insert('wc_teacher_category_level', $data);
    
12.                         if($inst){
    
13.                                 message(error(0, '设置成功'), '', 'ajax');
    
14.                         }else{
    
15.                                 message(error(-1, '设置失败，请重试！'), '', 'ajax');
    
16.                         }
    
17.         }else{
    
18.                 $updt = pdo_update('wc_teacher_category_level', $data, array('uniacid'=>$_W['uniacid']));
    
19.                         if($updt){
    
20.                                 message(error(0, '设置成功'), '', 'ajax');
    
21.                         }else{
    
22.                                 message(error(-1, '设置失败，请重试！'), '', 'ajax');
    
23.                         }
    
24.         }
    
25.     }

复制代码

返回给前端的data对象如下：
data.message.errno表示错误代码，正如我们上面php定义的0和1，而data.message.message表示的是上面代码中的error()方法中的文字描述“设置成功”的内容。
跳转的链接内容使用的是data.redirect，而data.type是ajax。