php增删改查前后端分离,前后端分离之前端增删改查

初次接触前后端分离，现把前端一个例子放出来记录以下，不喜勿喷。

html静态页面代码：

菜单管理平台数据...

菜单管理查询条件列表

菜单名称：

菜单父级：

菜单名称：

菜单级别：

菜单父级：

图片地址：

链接地址：

校验位   ：

菜单大图片   ：js代码：

$(function() {

inittable();

});

// 初始化表格

function inittable() {

var urlg2 = $.cookie('urlg');

$('#dg').datagrid({

url : urlg2 + "/tbmenu/selectMenuForPage",

title : '信息列表',// 文字提示

toolbar : '#toolbar',

iconCls : 'icon-ok',

fitColumns : true,

pageSize : 20,// 默认每页多少行

pageList : [ 10, 20, 30, 40, 50 ],// 可以选择每页多少行

pageSize : 15,// 默认每页多少行

pageList : [ 15, 20, 30, 40, 50 ],// 可以选择每页多少行

collapsible : true,

nowrap : false,

striped : true,

queryParams : {

"menuName" : $("#menuName").val(),

"parentname" : $("#parentname").val()

},

collapsible : true,

loadMsg : '数据装载中......',// 等待页面的时候，显示的内容

frozenColumns : [ [ {

field : 'ck',

checkbox : true

} ] ],

columns : [ [ {

field : 'menuName',

title : '菜单名称',

width : 30,

align : 'center'

}, {

field : 'levelname',

title : '菜单级别',

width : 30,

align : 'center'

}, {

field : 'parentname',

title : '菜单父级',

width : 30,

align : 'center'

}, {

field : 'menuAddress',

title : '菜单图片地址',

width : 30,

align : 'center'

}, {

field : 'linkAddress',

title : '链接地址',

width : 30,

align : 'center'

} ] ],

pagination : true,// 启动分页效果

rownumbers : true, // 显示行数

singleSelect : true,

// 只选择一行

xhrFields : {

withCredentials : true

}

});

}

var url;

// 弹出新增窗口

function newUser() {

var urlg2 = $.cookie('urlg');

$('#dlg').dialog('open').dialog('setTitle', '新增菜单管理');

$('#fm').form('clear');

$('#cc1').combobox(

{

url : urlg2 + '/tbdictionary/selectDicBytype1?dicType=5',

valueField : "dicValue",

textField : "dicName",

dataType : "json",

onLoadSuccess : function(data) {

$('#cc1').combobox('setValue', data[0].dicValue);

},

onChange : function(n, o) {

$('#cc2').combobox(

{

url : urlg2

+ '/tbmenu/selectAllMenu?menuLevel='

+ $('#cc1').combobox('getValue'),

valueField : "menuCode",

textField : "menuName",

dataType : "json"

// 是否多选

});

}

});

url = urlg2 + "/tbmenu/addMenu";

}

// 弹出修改窗口

function editUser() {

var urlg2 = $.cookie('urlg');

$('#fm').form("clear");

$('#cc1').combobox(

{

url : urlg2 + '/tbdictionary/selectDicBytype1?dicType=5',

valueField : "dicValue",

textField : "dicName",

dataType : "json",

onLoadSuccess : function(data) {

},

onChange : function(n, o) {

$('#cc2').combobox(

{

url : urlg2

+ '/tbmenu/selectAllMenu?menuLevel='

+ $('#cc1').combobox('getValue'),

valueField : "menuCode",

textField : "menuName",

dataType : "json"

// 是否多选

});

}

});

var row = $('#dg').datagrid('getSelected');

if (row) {

$('#dlg').dialog('open').dialog('setTitle', '修改菜单管理');

$('#fm').form('load', row);

url = urlg2 + "/tbmenu/updateMenu?menuCode=" + row.menuCode;

}

}

// 新增或修改方法

function saveUser() {

if ($("#fm").form('validate')) {

$.ajax({

url : url,

type : "POST",

dataType : "json",

data : $("#fm").serialize(),

async : false,

success : function(data) {

if (data.success == true) {

$('#dlg').dialog('close'); // close the dialog

$('#dg').datagrid('reload'); // reload the user

// data

$.messager.show({

title : 'success',

msg : data.msg

});

} else {

$.messager.show({

title : 'Error',

msg : data.msg

});

}

},

error : function(e) {

alert("服务器异常！");

}

});

} else {

$.messager.show({

title : 'Error',

msg : '请填写信息！'

});

}

}

// 删除

function removeUser() {

var urlg2 = $.cookie('urlg');

var row = $('#dg').datagrid('getSelected');

if (row) {

$.messager.confirm('确认', '确定删除该条数据?', function(r) {

if (r) {

$.post(urlg2 + "/tbmenu/deleteMenu", {

menuCode : row.menuCode

}, function(result) {

if (result.success) {

$('#dg').datagrid('reload'); // reload

// the

// user data

$.messager.show({ // show error

// message

title : 'success',

msg : result.msg

});

} else {

$.messager.show({ // show error

// message

title : 'Error',

msg : result.msg

});

}

}, 'json');

}

});

}

}

以上是项目中一个菜单的CRUD前端代码