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="" height="" alt="" />
</a>
<div class="fr logofr">
<a href="#" class="blk">返回首页</a> |<a href="#" class="blk">客服中心</a><br>
如注册遇到问题请拨打：<strong style="font-size:14px;">--</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="">单位编号</th>
<th field="lastname" width="">单位名称</th>
<th field="phone" width="">单位性质</th>
<th field="email" width="">单位地址</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 = ;
try {
getConnection();
ps = con.prepareStatement("insert into test values (?,?,?,?,?)");
ps.setInt(, id);
ps.setString(, firstname);
ps.setString(, lastname);
ps.setString(,phone);
ps.setString(, 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();
}
} }
ajax异步加载查询数据库的更多相关文章
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- Scrapy爬虫框架教程（四）-- 抓取AJAX异步加载网页
欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction ...
- jQuery的AJax异步加载
主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...
- ajax异步加载问题
使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.
- Ajax 异步加载
AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...
- 使用Ajax异步加载页面时，怎样调试该页面的Js
前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...
- ajax异步加载回跳定位
1)首先,问题是这样的:page1在一个滚动到页面底部加载更新的函数(功能),当页面滚动了第二页(或更多页)时,点击链接跳转到了其他页面(page2),在page2有返回按钮,当从page2返回pag ...
- AJAX异步加载
AJAX含义: 即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX可以跨 ...
- ajax 异步加载显示等待效果
css: #loading { width:170px; height:25px; border:3px solid #C3DAF9; position:absolute; top:300px; le ...
随机推荐
- Eclipce远程调试
1.注意: root权限启动的进程不支持远程调试,也有很多隐患,支持最高权限,应用普通用户启动,又原先安装Tomcat是使用的root权限,普通用户对root安装的软件没有执行权限,可以修改相应权限, ...
- 剑指offer-构建乘积数组-数组-python
题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...
- ES6 模块的加载实现 import和export
ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(m ...
- mock.js 模拟数据
1. 劫持请求,返回模拟数据: 用于前后台对接前数据模拟 相比于静态json文件而言:代码完成后不必修改源文件对应的接口调用.可模拟增删改查 2.实例代码 <!doctype html> ...
- 终于要开始做大名鼎鼎的BombLab了！
首先是一些准备工作 lab下载地址:http://csapp.cs.cmu.edu/3e/labs.html 第二个的Bomblab的 self-study handout就是 在做这个lab前,首先 ...
- 小米Air 13.3 安装Arch Linux
0. 前言 最近新买了一台小米Air 13.3,除了但键盘手感外都比较满意.我比较喜欢折腾Linux,但又不想放弃原有的Windows 10 Home,于是在原有的windows 10基础上再安装了A ...
- ubuntu版本查看命令
简单的 在命令终端输入 1.cat /etc/issue (简单) 2.cat /etc/lsb-release(具体) 3.uname -a(内核) 具体的 有时候我们安装软件或者搭建服务的时候,需 ...
- python出现Non-ASCII character '\xe6' in file statistics.py on line 19, but no encoding declared错误
可按照错误建议网址查看http://www.python.org/peps/pep-0263.html 发现是因为Python在默认状态下不支持源文件中的编码所致.解决方案有如下三种: 一.在文件头部 ...
- Java使用freemarker导出word文档
通过freemarker,以及JAVA,导出word文档. 共分为三步: 第一步:创建模板文件 第二步:通过JAVA创建返回值. 第三步:执行 分别介绍如下: 第一步: 首先创建word文档,按照想要 ...
- sed基础语法
sed 太强大了 参考博客如下:https://www.cnblogs.com/ctaixw/p/5860221.html sed: Stream Editor文本流编辑,sed是一个“非交互式的”面 ...