1. 程式人生 > >SSM中Ajax實現非同步重新整理,前端頁面綁值。

SSM中Ajax實現非同步重新整理,前端頁面綁值。

 //獲取表單的值,並進行序列化,將序列化的值傳入controller。
		      var cc=$("#add_menber_style").serialize();
              $.ajax({
                  type :"POST",
                  url : "/adduser",
                  data:cc,
                  dataType:"json",
                  success:function(data){
                     //獲取tbody標籤的id。
                      var tbody =$('#tbody');
                     //html 用於拼接資料
                     var html="";
                     html+=" <tr>\n" +
                         "                      <td><label>\n" +
                         "                          <input type=\"checkbox\" class=\"ace\">\n" +
                         "                          <span class=\"lbl\"></span></label></td>\n" +
                         "                      <td>"+data.username+"</td>\n" +
                         "                      <td>"+data.name+"</td>\n" +
                         "                      <td>"+data.age+"</td>\n" +
                         "                      <td>"+data.tel+"</td>\n" +
                         "                      <td>"+data.qq+"</td>\n";
                             if(data.dept==1){
                                 html+="                      <td>"+"部門1"+"</td>\n";
                             }if(data.dept==2){
                                 html+="                      <td>"+"部門2"+"</td>\n";
                             }if(data.dept==3){
                                 html+="                      <td>"+"部門3"+"</td>\n";
                            }
                                 html+="                      <td>"+data.role_id+"</td>\n";
                                 html+="                      <td>"+data.add_time+"</td>\n";
                              if(data.state==1){
                                  html+="<td class=\"td-status\"><span class=\"label label-success radius\">正常</span></td>\n" +
                               "                      <td class=\"td-manage\"><a onClick=\"member_stop(this,'10001')\"  href=\"javascript:;\" title=\"停用\"  class=\"btn btn-xs btn-success\"><i class=\"icon-ok bigger-120\"></i></a> <a title=\"編輯\" onclick=\"member_edit('550')\" href=\"javascript:;\"  class=\"btn btn-xs btn-info\" ><i class=\"icon-edit bigger-120\"></i></a> <a title=\"刪除\" href=\"javascript:;\"  onclick=\"member_del(this,'1')\" class=\"btn btn-xs btn-warning\" ><i class=\"icon-trash  bigger-120\"></i></a></td>";
                              }else{
                                html+="        <td class=\"td-status\"><span class=\"label label-defaunt radius\">停用</span></td>\n" +
                                  "                      <td class=\"td-manage\"><a onClick=\"member_start(this,'100')\"  href=\"javascript:;\" title=\"起用\"  class=\"btn btn-xs btn-success\"><i class=\"icon-ok bigger-120\"></i></a> <a title=\"編輯\" onclick=\"member_edit('550')\" href=\"javascript:;\"  class=\"btn btn-xs btn-info\" ><i class=\"icon-edit bigger-120\"></i></a> <a title=\"刪除\" href=\"javascript:;\"  onclick=\"member_del(this,'1')\" class=\"btn btn-xs btn-warning\" ><i class=\"icon-trash  bigger-120\"></i></a></td>";
                              }
                              //將拼接好的資料,追加到資料的第一行。
                               tbody.prepend(html);
                      layer.alert('新增成功!',{
                          title: '提示框',
                          icon:1,
                      });
                      layer.close(index);
                  }
              });