前端：
<div style="font-size: 25px; font-weight: 700; margin: 50px 0 10px 10px;">
车辆登记
</div>
<!--添加按钮-->
<div id='myToolbar'>
<a class='easyui-linkbutton' iconcls='icon-add' href='javascript:void(0)' onclick='Insert()' style="margin: 5px 5px 5px 5px;">添加</a>
<a class='easyui-linkbutton' iconcls='icon-edit' href='javascript:void(0)' onclick='Edit()' style="margin: 5px 5px 5px 5px;">编辑</a>
<a class='easyui-linkbutton' iconcls='icon-cancel' href='javascript:void(0)' onclick='Delete()' style="margin: 5px 5px 5px 5px;">删除</a>
</div>
<!--数据表格-->
<table id="table_Data" class="easyui-datagrid" title=""
data-options="singleSelect:true,collapsible:true,url:'ashx/Car.ashx',method:'post',queryParams: { 'action': 'carlist' },toolbar: '#myToolbar',height: '500px',width: 'auto',iconCls: 'icon-edit',fitColumns: false,pagination: true,pageSize: 15,pageList: [15, 25, 35, 45],pageNumber: 1,rownumbers: true,loadMsg: '正在加载数据...',">
<thead>
<tr>
<th data-options="field:'ID',width:80, hidden: false">ID</th>
<th data-options="field:'Name',width:100,align:'center'">Name</th>
<th data-options="field:'Type',width:80,align:'center'">Type</th>
<th data-options="field:'LicenseTag',width:80,align:'center'">LicenseTag</th>
<th data-options="field:'Color',width:50,align:'center'">Color</th>
<th data-options="field:'Seats',width:60,align:'center'">Seats</th>
<th data-options="field:'Remarks',width:250,align:'center'">Remarks</th>
</tr>
</thead>
</table>
<!--添加对话框-->
<div id="div_Add" style="" class="easyui-dialog" data-options="iconCls:'icon-add',modal:true,closed:true,buttons:'#div_OkCancel'">
<div style="margin: 30px 0 0 0; overflow: hidden;">
<div style="width: 40%; text-align: right; float: left;">车辆名称：</div>
<div style="width: 60%; text-align: left; float: left;">
<input id="txtCarName" class="easyui-validatebox" data-options="required:true,missingMessage:'车辆名称不能为空！'" />
</div>
</div>
<div style="margin: 10px 0 0 0; overflow: hidden;">
<div style="width: 40%; text-align: right; float: left;">型号：</div>
<div style="width: 60%; text-align: left; float: left;">
<input id="txtType" type="text" />
</div>
</div>
<div style="margin: 10px 0 0 0; overflow: hidden;">
<div style="width: 40%; text-align: right; float: left;">牌照：</div>
<div style="width: 60%; text-align: left; float: left;">
<input id="txtLicenseTag" type="text" />
</div>
</div>
<div style="margin: 10px 0 0 0; overflow: hidden;">
<div style="width: 40%; text-align: right; float: left;">颜色：</div>
<div style="width: 60%; text-align: left; float: left;">
<input id="txtColor" type="text" />
</div>
</div>
<div style="margin: 10px 0 0 0; overflow: hidden;">
<div style="width: 40%; text-align: right; float: left;">座位数：</div>
<div style="width: 60%; text-align: left; float: left;">
<input id="txtSeats" class="easyui-numberbox" data-options="min:1,max:100,precision:0,required:true,missingMessage:'座位数不能为空！'" />
</div>
</div>
<div style="margin: 10px 0 30px 0; overflow: hidden;">
<div style="width: 40%; text-align: right; float: left;">备注：</div>
<div style="width: 60%; text-align: left; float: left;">
<textarea id="txtRemarks"></textarea>
</div>
</div>
</div>
<div id="div_OkCancel">
<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick='Submit()'>确定</a>
<a href='javascript:void(0);' class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick='$("#div_Add").dialog("close", false);'>取消</a>
</div>
<input type="hidden" id="hfID" />
添加js引用
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../JQuery/easyui/themes/icon.css" rel="stylesheet" />
<link href="../JQuery/easyui/themes/default/easyui.css" rel="stylesheet" />
<script src="../JQuery/jquery.min.js"></script>
<script src="../JQuery/easyui/jquery.easyui.min.js"></script>
<script src="../JQuery/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
jquery控制前端显示并利用ajax与服务器交互
1 var roolurl = "http://" window.location.host;
2 var urlAshx = roolurl "/CarManager/ashx/Car.ashx";
3 $(document).ready(function () {
4 // $("#table_Data").datagrid({
5 // toolbar: '#myToolbar',
6 // url: urlAshx,
7 // queryParams: { "action": "carlist" },
8 // method: 'post',
9 // width: 'auto',
10 // height: '500px',
11 // iconCls: 'icon-edit',
12 // singleSelect: true,
13 // fitColumns: false,
14 // pagination: true,
15 // pageSize: 15,
16 // pageList: [15, 25, 35, 45],
17 // pageNumber: 1,
18 // rownumbers: true,
19 // loadMsg: "正在加载数据...",
20 // columns: [[
21 // { filed: 'ID', title: '编号', width: 120, hidden: true },
22 // { filed: 'Name', title: '车辆名称', width: 120, align: 'center' },
23 // { filed: 'Type', title: '型号', width: 120, align: 'center' },
24 // { filed: 'LicenseTag', title: '牌号', width: 120, align: 'center' },
25 // { filed: 'Color', title: '座位数', width: 120, align: 'center' },
26 // { filed: 'Seats', title: '颜色', width: 120, align: 'center' },
27 // { filed: 'Remarks', title: '备注', width: 920, align: 'center' },
28 // {
29 // filed: 'Action', title: '操作', width: 550, align: 'center', formatter: function (value, row, index) {
30 // alert(row.Name);
31 // var Action = "<a href='javascript:void(0);' onclick='Edit(" row.ID ")'>修改</a>\
32 //| <a href='javascript:void(0);' onclick='Delete(" row.ID ")'>删除</a>";
33 // return Action;
34 // }
35 // }
36 // ]],
37 // onLoadSuccess: function (data) { alert("success"); },
38 // onLoadError: function (XMLHttpRequest, textStatus, errorThrown) { alert("error"); },
39 // onBeforeEdit: function (index, row) { },
40 // onAfterEdit: function (index, row) { },
41 // onCancelEdit: function (index, row) { }
42 // });
43 });
44 //添加按钮
45 function Insert() {
46 //alert(roolurl "/CarManager/CarEdit.aspx?type=add");
47 //window.parent.OpenWindow("登记车辆", roolurl "/CarManager/CarEdit.aspx?type=add", "500", "300", "icon-add");
48 //清空
49 $("#hfID").attr("value", "");
50 $("#txtCarName").val("");
51 $("#txtType").val("");
52 $("#txtLicenseTag").val("");
53 $("#txtColor").val("");
54 $('#txtSeats').numberbox('setValue', null);
55 $("#txtRemarks").val("");
56 //弹出窗口
57 $("#div_Add").dialog({
58 title: "车辆登记",
59 width: 500,
60 height: 370,
61 closed: false,
62 //buttons: '#div_OkCancel',
63 modal: true //定义窗口是不是模态（modal）窗口。
64 });
65 }
66 //编辑按钮
67 function Edit() {
68 var row = $("#table_Data").datagrid('getSelected');
69 if (row != null) {
70 //初始化值
71 $("#hfID").attr("value", row.ID);
72 $("#txtCarName").val(row.Name);
73 $("#txtType").val(row.Type);
74 $("#txtLicenseTag").val(row.LicenseTag);
75 $("#txtColor").val(row.Color);
76 $('#txtSeats').numberbox('setValue', row.Seats);
77 $("#txtRemarks").val(row.Remarks);
78 //弹出窗口
79 $("#div_Add").dialog({
80 title: "车辆信息编辑",
81 width: 500,
82 height: 370,
83 closed: false,
84 //buttons: '#div_OkCancel',
85 modal: true //定义窗口是不是模态（modal）窗口。
86 });
87 //$.messager.alert("提示", $('#txtSeats').numberbox('getValue'));
88 } else {
89 $.messager.alert("提示", "请先选中要编辑的行!");
90 }
91 }
92 //删除按钮
93 function Delete() {
94 var row = $("#table_Data").datagrid('getSelected');
95 if (row == null) {
96 $.messager.alert("提示", "请先选中要删除的行!");
97 return false;
98 }
99 $.messager.confirm("提示", "确定要删除么?", function (r) {
100 if (r) {
101 $.ajax({
102 //提交数据的类型 POST GET
103 type: "POST",
104 //提交的网址
105 url: urlAshx,
106 //提交的数据
107 data: {
108 action: "deletecar",
109 id: row.ID
110 },
111 //返回数据的格式
112 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
113 //在请求之前调用的函数
114 beforeSend: function () { },
115 //成功返回之后调用的函数
116 success: function (data) {
117 var data = JSON.parse(data);
118 if (data.msg == "1") {
119 $("#div_Add").dialog('close', false);//关闭窗口
120 $("#table_Data").datagrid('reload');//刷新页面
121 }
122 $.messager.alert("提示", data.msgbox);
123 },
124 //调用执行后调用的函数
125 complete: function (XMLHttpRequest, textStatus) {
126 },
127 //调用出错执行的函数
128 error: function () {
129 //请求出错处理
130 }
131 });
132 }
133 });
134 }
135 //提交
136 function Submit() {
137 var carname = $.trim($("#txtCarName").val());
138 var seats = $.trim($("#txtSeats").numberbox('getValue'));
139 if (carname == "" || seats == "") {
140 $.messager.alert("提示", "车辆名称和座位数不能为空");
141 return false;
142 }
143
144 var id = $.trim($("#hfID").attr("value"));
145 if (id != "") {//编辑
146 EditCar(id);
147 } else {//登记
148 AddCar();
149 }
150 }
151 //登记车辆
152 function AddCar() {
153 $.ajax({
154 //提交数据的类型 POST GET
155 type: "POST",
156 //提交的网址
157 url: urlAshx,
158 //提交的数据
159 data: {
160 action: "addcar",
161 carname: $("#txtCarName").val(),
162 type: $("#txtType").val(),
163 licensetag: $("#txtLicenseTag").val(),
164 color: $("#txtColor").val(),
165 seats: $("#txtSeats").numberbox('getValue'),
166 remarks: $("#txtRemarks").val()
167 },
168 //返回数据的格式
169 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
170 //在请求之前调用的函数
171 beforeSend: function () { },
172 //成功返回之后调用的函数
173 success: function (data) {
174 var data = JSON.parse(data);
175 if (data.msg == "1") {
176 $("#div_Add").dialog('close', false);//关闭窗口
177 $("#table_Data").datagrid('reload');//刷新页面
178 }
179 $.messager.alert("提示", data.msgbox);
180 },
181 //调用执行后调用的函数
182 complete: function (XMLHttpRequest, textStatus) {
183 },
184 //调用出错执行的函数
185 error: function () {
186 //请求出错处理
187 }
188 });
189 }
190 //编辑车辆
191 function EditCar(_id) {
192 $.ajax({
193 //提交数据的类型 POST GET
194 type: "POST",
195 //提交的网址
196 url: urlAshx,
197 //提交的数据
198 data: {
199 action: "editcar",
200 id: _id,
201 carname: $("#txtCarName").val(),
202 type: $("#txtType").val(),
203 licensetag: $("#txtLicenseTag").val(),
204 color: $("#txtColor").val(),
205 seats: $("#txtSeats").numberbox('getValue'),
206 remarks: $("#txtRemarks").val()
207 },
208 //返回数据的格式
209 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
210 //在请求之前调用的函数
211 beforeSend: function () { },
212 //成功返回之后调用的函数
213 success: function (data) {
214 var data = JSON.parse(data);
215 if (data.msg == "1") {
216 $("#div_Add").dialog('close', false);//关闭窗口
217 $("#table_Data").datagrid('reload');//刷新页面
218 }
219 $.messager.alert("提示", data.msgbox);
220 },
221 //调用执行后调用的函数
222 complete: function (XMLHttpRequest, textStatus) {
223 },
224 //调用出错执行的函数
225 error: function () {
226 //请求出错处理
227 }
228 });
229 }更多专业前端知识，请上 【猿2048】www.mk2048.com