初次接觸前后端分離，現把前端一個例子放出來記錄以下，不喜勿噴。

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前端代碼

總結

以上是生活随笔為你收集整理的php增删改查前后端分离,前后端分离之前端增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。