servlet mysql json数据库_javaweb+servlet+mysql+ajax+json+echarts简单实例

最新推荐文章于 2023-08-28 19:40:33 发布

西客希林

最新推荐文章于 2023-08-28 19:40:33 发布

阅读量106

点赞数

文章标签： servlet mysql json数据库

本文链接：https://blog.csdn.net/weixin_34416909/article/details/113540352

版权

3 + request.getServerPort() + request.getContextPath() + "/"; %>

test10

用户列表

24 添加新的用户

账户

密码

操作

76 //开始

77 $(function() {78 list();79 show();80 });81

82 function list() {83 $.ajax({84 type: "GET",85 url: "UserServlet?action=list",86 dataType: "json",87 success: function(data) {88 $("#users tbody").empty(); //每次载入前先清空显示区域，防止数据重复显示

89 var users =eval(data.users);90 for(var i in users) {91 var user =users[i];92 var userStr =JSON.stringify(user);93 $("#users tbody").append('

' + user.account + ''

94 + '

' + user.password + ''

95 + '

更新 '

96 + '删除

');97 }98 },99 error: function() {100 console.log("ajax error");101 }102 });103 }104

105 //显示所有用户

106 function listAllUser() {107 $.ajax({108 type: "GET",109 url: "UserServlet?action=listAll",110 dataType: "json",111 success: function(data) {112 $("#users tbody").empty(); //每次载入前先清空显示区域，防止数据重复显示

113 var users =data.users;114 for(var i in users) {115 var user =users[i];116 var userStr =JSON.stringify(user);117 $("#users tbody").append('

' + user.account + ''

118 + '

' + user.password + ''

119 + '

更新 '

120 + '删除

');121 }122 },123 error: function() {124 console.log("ajax error");125 }126 });127 }128

129 //显示添加用户模态框

130 function showAddUserModal() {131 $("#add-user-form")[0].reset(); //每次载入前先清空表单，防止显示之前的信息

132 $("#add-user-modal").dialog({133 resizable: false,134 modal: true,135 buttons: {136 "提交": function() {137 addUser();138 },139 "取消": function() {140 $(this).dialog("close");141 },142 },143 });144 }145

146 //添加用户

147 function addUser() {148 //获取序列化表单信息

149 var user = $("#add-user-form").serializeJSON();150 var userStr =JSON.stringify(user);151

152 $.ajax({153 type: "POST",154 url: "UserServlet",155 data: userStr,156 dataType: "json",157 success: function(data) {158 if(data.isSuccess) {159 $("#add-user-modal").dialog("close");160 showMsg('添加成功！');161 list();162 show();163 } else{164 $("#add-user-modal").dialog("close");165 showMsg('添加失败！');166 list();167 show();168 }169 },170 error: function() {171 console.log("ajax error");172 },173 });174 }175

176 //删除用户

177 function deleteUser(id) {178 //将id封装为JSON格式数据

179 var data ={};180 data.id =id;181 var dataStr =JSON.stringify(data);182 //显示删除用户模态框

183 $("#delete-user-modal").dialog({184 resizable: false,185 modal: true,186 buttons: {187 "确认": function() {188 $.ajax({189 type: "DELETE",190 url: "UserServlet",191 data: dataStr,192 dataType: "json",193 success: function(data) {194 if(data.isSuccess) {195 $("#delete-user-modal").dialog("close");196 showMsg('删除成功！');197 list();198 show();199 } else{200 $("#delete-user-modal").dialog("close");201 showMsg('删除失败！');202 list();203 }204 },205 error: function() {206 console.log("ajax error");207 },208 });209 },210 "取消": function() {211 $(this).dialog("close");212 },213 },214 });215 }216

217 //显示更新用户模态框

218 function showUpdateUserModal(user) {219 $("#update-user-form")[0].reset(); //每次载入前先清空表单，防止显示之前的信息220 //表单赋值

221 $("#update-user-form input[name='id']").val(user.id);222 $("#update-user-form input[name='account']").val(user.account);223 $("#update-user-form input[name='password']").val(user.password);224 $("#update-user-form input[name='name']").val(user.name);225 $("#update-user-form input[name='info']").val(user.info);226

227 $("#update-user-modal").dialog({228 resizable: false,229 modal: true,230 buttons: {231 "提交": function() {232 updateUser();233 },234 "取消": function() {235 $(this).dialog("close");236 },237 },238 });239 }240

241 //更新用户

242 function updateUser() {243 //获取序列化表单信息

244 var user = $("#update-user-form").serializeJSON();245 var userStr =JSON.stringify(user);246

247 $.ajax({248 type: "PUT",249 url: "UserServlet",250 data: userStr,251 contentType: 'application/json;charset=utf-8',252 dataType: "json",253 success: function(data) {254 if(data.isSuccess) {255 $("#update-user-modal").dialog("close");256 showMsg('更新成功！');257 list();258 show();259 } else{260 $("#update-user-modal").dialog("close");261 showMsg('更新失败！');262 list();263 show();264 }265 },266 error: function() {267 console.log("ajax error");268 },269 });270 }271

272 //显示提示信息

273 function showMsg(text) {274 $("#msg-modal p").text(''); //每次载入前先清空显示区域，防止显示之前的信息

275 $("#msg-modal p").text(text);276 $("#msg-modal").dialog({277 modal: true,278 });279 //2s后消失

280 setTimeout(function() {281 $("#msg-modal").dialog("close")282 },2000);283 }284

285 //显示图表286 //利用dom，初始化echarts实例

287 var myChart = echarts.init(document.getElementById('main'));288 var account= []; //账户的数组

289 var password= []; //的数组

290 function show() {291 $.ajax({292 type: "GET",293 url: "UserServlet?action=list",294 dataType: "json",295 success: function(result){296 var users =result.users;297 //加载数据前先置空数组

298 account=[];299 password=[];300 for(var i in users){301 //alert(users[i].account+"---"+users[i].password);

302 account.push(users[i].account);303 password.push(users[i].password);304 }305 //显示返回值306 //document.write([account]+ "
");307 //document.write([password]);

308 var option={309 tooltip: {310 show: true,311 trigger: 'axis',312 },313 legend: {314 data:['数量']315 },316 toolbox: {317 show : true,318 feature : {319 mark : {show: true}, //辅助线标志

320 dataView : {show: true, readOnly: false}, //数据视图

321 magicType : {show: true, type: ['line', 'bar']}, //动态类型转换(折线柱形互转)

322 restore : {show: true}, //还原

323 saveAsImage : {show: true} //保存图片

324 }325 },326 xAxis: {327 type: 'category',328 data: account329 },330 yAxis: {331 type: 'value'

332 },333 series: [{334 data: password,335 name: '数量',336 type: 'bar',337 }]338 }339 myChart.setOption(option,true);//重新加载

340 }341 });342 }343

344

345

西客希林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
servlet mysql json数据库_javaweb+servlet+mysql+ajax+json+echarts简单实例

1 2 3 + request.getServerPort() + request.getContextPath() + "/"; %>45 6 7 8 9 test10 11 12 13 14 15 16 1718 19 20 21 22 23 用户列表24 添加新的用户25 26 27 28 ...
复制链接

扫一扫