ajax异步加载查询数据库详解编程语言

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>数据</title> 
<link rel="stylesheet" href="static/css/style.css" type="text/css"> 
<!-- jQuery-easyUI start --> 
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> 
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css"> 
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css"> 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 
<!-- jQuery-easyUI end --> 
<script type="text/javascript"> 
document.createElement("section"); 
document.createElement("article"); 
document.createElement("footer"); 
document.createElement("header"); 
document.createElement("hgroup"); 
document.createElement("nav"); 
document.createElement("menu"); 
</script> 
<script type="text/javascript"> 
function Save() { 
document.getElementById("PageOfficeCtrl1").WebSave(); 
} 
</script> 
</head> 
<body> 
<header> 
<div class="w12 header"> 
<a class="db logo fl"><img src="static/images/logo.jpg" 
width="327" height="94" alt="" /> 
</a> 
<div class="fr logofr"> 
<a href="#" class="blk">返回首页</a> |<a href="#" class="blk">客服中心</a><br> 
如注册遇到问题请拨打:<strong style="font-size:14px;">400-000-0000</strong> 
</div> 
</div> 
</header> 
<div class="head_border"></div> 
<section class="w12 login"> <em class="fr">当前用户:张三 </em> </section> 
<section class="main w12"> 
<div class="title"> 
<a class="title1 db fl">审核报告</a><a class="title2 db fl">审核合同</a> 
</div> 
<div class="fr tit2"> 
<span class="arr"></span> 
</div> 
</section> 
<br /><br /> 
<div style="text-align:content;margin-left: 300px;"> 
<table id="dg" title="北京某某科技有限公司" class="easyui-datagrid" style="width:700px;height:250px;,margin: auto;" 
url="get_users.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"> 
<thead> 
<tr id="insertSpareEpt"> 
<th field="firstname" width="50">单位编号</th> 
<th field="lastname" width="50">单位名称</th> 
<th field="phone" width="50">单位性质</th> 
<th field="email" width="50">单位地址</th> 
</tr> 
</thead> 
</table> 
</div> 
<div id="toolbar"> 
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a> 
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改</a> 
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a> 
</div> 
<div id="divTab"></div> 
<!-- 弹窗 --> 
<div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'"> 
<form id="fm" method="post" novalidate style="margin:0;padding:20px 50px"> 
<h3>单位信息</h3> 
<div style="margin-bottom:10px"> 
<input name="firstname" class="easyui-textbox" required="true" label="单位编号:" style="width:100%"> 
</div> 
<div style="margin-bottom:10px"> 
<input name="lastname" class="easyui-textbox" required="true" label="单位名称:" style="width:100%"> 
</div> 
<div style="margin-bottom:10px"> 
<input name="phone" class="easyui-textbox" required="true" label="单位性质:" style="width:100%"> 
</div> 
<div style="margin-bottom:10px"> 
<input name="email" class="easyui-textbox" required="true" validType="email" label="单位地址:" style="width:100%"> 
</div> 
</form> 
</div> 
<div id="dlg-buttons"> 
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">添加</a> 
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a> 
</div> 
<script type="text/javascript"> 
var url; 
function newUser(){ 
$('#dlg').dialog('open').dialog('center').dialog('setTitle','New User'); 
$('#fm').form('clear'); 
url = 'save_user.php'; 
} 
function editUser(){ 
var row = $('#dg').datagrid('getSelected'); 
if (row){ 
$('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User'); 
$('#fm').form('load',row); 
url = 'update_user.php?id='+row.id; 
} 
} 
function saveUser1(){ 
$('#fm').form('submit',{ 
url: saveInfo, 
onSubmit: function(){ 
return $(this).form('validate'); 
}, 
success: function(result){ 
var result = eval('('+result+')'); 
if (result.errorMsg){ 
$.messager.show({ 
title: 'Error', 
msg: result.errorMsg 
}); 
} else { 
$('#dlg').dialog('close');        // close the dialog 
$('#dg').datagrid('reload');    // reload the user data 
                        } 
} 
}); 
} 
/* 保存  */ 
function saveUser(){ 
var info; 
var firstname = $("input[name='firstname']").val(); 
var lastname = $("input[name='lastname']").val(); 
var phone = $("input[name='phone']").val(); 
var email = $("input[name='email']").val(); 
$.ajax({ 
type : 'get', 
url : 'saveInfo', 
data:{ 
"firstname":firstname, 
"lastname":lastname, 
"phone":phone, 
"email":email 
}, 
cache : false, 
async : false, 
dataType : 'json', 
success : function(data){ 
$("#dg").datagrid("loadData",data);// 数据加载jQuery easyUI表格中 
/* var tabStr = ""; 
$.each(data, function(index,value){ 
var item = data[index]; 
var itemFirstname = item.firstname; 
var itemLastname = item.lastname; 
var itemPhone = item.phone; 
var itemEmail = item.email; 
var itemStr = "<table border='1' cellpadding='0' cellspacing='0'><tr>"+ 
"<td name='firstname' width=50>"+itemFirstname+"</td>"+ 
"<td name='lastname' width=50>"+itemLastname+"</td>"+ 
"<td name='phone' width=50>"+itemPhone+"</td>"+ 
"<td name='email' width=50>"+itemEmail+"</td>"+ 
"</tr></table>"; 
tabStr += itemStr; 
}) 
document.getElementById("divTab").innerHTML = tabStr; */ 
} , error:function(data){ 
alert("加载数据失败!"+data); 
} 
}); 
// 关闭添加窗口 
$('#dlg').dialog('close'); 
} 
function destroyUser(){ 
var row = $('#dg').datagrid('getSelected'); 
if (row){ 
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){ 
if (r){ 
$.post('destroy_user.php',{id:row.id},function(result){ 
if (result.success){ 
$('#dg').datagrid('reload');    // reload the user data 
} else { 
$.messager.show({    // show error message 
title: 'Error', 
msg: result.errorMsg 
}); 
} 
},'json'); 
} 
}); 
} 
} 
</script> 
</body> 
</html> 
package com.wyebd.controller; 
import java.sql.Connection; 
import java.sql.DriverManager; 
import java.sql.PreparedStatement; 
import java.sql.ResultSet; 
import java.sql.SQLException; 
import java.sql.Statement; 
import java.util.ArrayList; 
import java.util.List; 
import java.util.Map; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import org.apache.log4j.Logger; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.bind.annotation.RestController; 
import org.springframework.web.servlet.ModelAndView; 
import com.alibaba.fastjson.JSON; 
import com.wyebd.bean.Contract; 
import com.zhuozhengsoft.pageoffice.OpenModeType; 
import com.zhuozhengsoft.pageoffice.PageOfficeCtrl; 
import com.zhuozhengsoft.pageoffice.wordwriter.WordDocument; 
@RestController 
public class ReadDataController { 
private static Logger log = Logger.getLogger(ReadOnlyController.class); 
private final String DB_URL = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8"; 
private static final String USER = "root"; 
private static final String PASS = "root"; 
private static Connection con = null; 
private static PreparedStatement ps = null; 
private static Statement stmt = null; 
private static ResultSet rs = null; 
/** 
* 跳转至查询页面 
* @param request 
* @param response 
* @param map 
* @return 
*/ 
@RequestMapping(value = "/readData", method = RequestMethod.GET) 
public ModelAndView readData() { 
ModelAndView mv = new ModelAndView("readData"); 
return mv; 
} 
/** 
* 保存 
* @param request 
* @param response 
* @param map 
* @return 
*/ 
@RequestMapping("saveInfo") 
public String saveInfo(HttpServletRequest request, HttpServletResponse response, Map<String, Object> map) { 
List<Contract> list = new ArrayList<Contract>(); 
String firstname = request.getParameter("firstname"); 
String lastname = request.getParameter("lastname"); 
String phone = request.getParameter("phone"); 
String email = request.getParameter("email"); 
String json = null; 
int id = 0; 
try { 
getConnection(); 
ps = con.prepareStatement("insert into test values (?,?,?,?,?)"); 
ps.setInt(1, id); 
ps.setString(2, firstname); 
ps.setString(3, lastname); 
ps.setString(4,phone); 
ps.setString(5, email); 
ps.executeUpdate(); 
log.info("添加成功"); 
rs = stmt.executeQuery("select * from test"); 
while(rs.next()){ 
Contract con = new Contract(); 
con.setFirstname(rs.getString("firstname")); 
con.setLastname(rs.getString("lastname")); 
con.setPhone(rs.getString("phone")); 
con.setEmail(rs.getString("email")); 
list.add(con); 
} 
// list转为json传入前端 
json = JSON.toJSONString(list); 
log.info(json); 
// 取得流向JSP传递数据 
response.setContentType("text/html;charset=UTF-8"); 
response.getWriter().println(json); 
response.reset(); 
} catch (Exception e) { 
log.info("SQLException: " + e.getMessage()); 
e.printStackTrace(); 
} finally { 
try { 
ps.close(); 
con.close(); 
} catch (SQLException e) { 
e.printStackTrace(); 
} 
} 
return json; 
} 
/** 
* 连接数据库 
* @throws ClassNotFoundException 
* @throws SQLException 
*/ 
public void getConnection() throws ClassNotFoundException, SQLException { 
try { 
Class.forName("com.mysql.jdbc.Driver"); 
con = DriverManager.getConnection(DB_URL, USER, PASS); 
stmt = con.createStatement(); 
} catch (Exception e) { 
System.out.println("SQLException: " + e.getMessage()); 
e.printStackTrace(); 
} 
} 
}

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/20736.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论