1.ajax异步请求数据后填入模态框

请求数据的按钮(HTML)

<a class="queryA" href="javascript:void(0)"   onclick="query(${register.id})"> <span class="glyphicon glyphicon-search"></span></a>

 ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框(JS)

//查询单个
function query(id) {
$.ajax({
url : "/small/productServlet",
async : true,
type : "POST",
data : {
"type" : "query",
"id" : id
},
// 成功后开启模态框
success : showQuery,
error : function() {
alert("请求失败");
},
dataType : "json"
});
} // 查询成功后向模态框插入数据并开启模态框。data是返回的JSON对象
function showQuery(data) {
$("#name1").val(data.name);
$("#xinghao1").val(data.xinghao);
$("#address1").val(data.address);
$("#department1").val(data.department);
$("#unit1").val(data.unit);
$("#number1").val(data.number);
$("#price1").val(data.price);
$("#totalprice1").val(data.totalprice);
$("#come1").val(data.come);
$("#buytime1").val(data.buytime);
$("#useperson1").val(data.useperson);
$("#handleperson1").val(data.handleperson);
$("#admini1").val(data.admini);
// 显示模态框
$('#queryInfo').modal('show');
}

后台处理ajax请求并返回JSON串(Java)

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
RegisterService service = new RegisterServiceImpl();
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
String type = request.getParameter("type");
if (type != null && "add".equals(type)) {
try {
this.add(request, response, service);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} if (type != null && "query".equals(type)) {
try {
this.query(request, response, service);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
} protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
} public void query(HttpServletRequest request, HttpServletResponse response, RegisterService service)
throws Exception {
Integer id = Integer.parseInt(request.getParameter("id"));
Register register = service.getRegisterById(id);
Gson gson = new Gson();
String json = gson.toJson(register);
System.out.println(json);
response.getWriter().write(json);
}

JSON串:

{"id":16,"name":"测试名称16","address":"测试地址2","department":"测试部门2","unit":"测试单位2","number":1,"price":1.5,"totalprice":1.5,"come":"来源2","buytime":"八月 23, 2017","useperson":"使用人2","handleperson":"经办人2","admini":"管理员部门2"}

2.ajax异步请求删除数据后刷新页面

 请求删除的按钮(HTML)

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAUCAIAAADkwkEeAAAAdklEQVQ4jWP4STpgoI6eMyv3Gldth6LOU2eI0bN25t4JFyHMS0VVh9fi07PrMMJ4TDTzEj57CAIUPSg+wWHJz5+X0PUEr7y/dubeCRfvT+jcO+HipaKqw2svngpG1nPxFOl6yLEH0z+DVg/OaMWnhzgwqufnTwAJe3u0Sac3SQAAAABJRU5ErkJggg==" alt="" />

<a class="" href="javascript:void(0)" onclick="deleteInfo(${register.id})"> <span  class="glyphicon glyphicon-trash"></a>

 Ajax请求删除数据后刷新页面(JS)

// ajax异步删除后刷新页面
function deleteInfo(id) {
alert("dele");
$.ajax({
url : "/small/productServlet",
async : true,
type : "POST",
data : {
"type" : "delete",
"id" : id
},
success : function(data) {
alert(data);
// 删除成功后刷新页面
window.location.reload();
},
error : function() {
alert("请求失败");
},
dataType : "text"
});
}

 后台处理删除的ajax请求(Java)

    // 根据id删除
public void delete(HttpServletRequest request, HttpServletResponse response, RegisterService service)
throws Exception {
Integer id = Integer.valueOf(request.getParameter("id"));
boolean result = service.deleteRegisterById(id);
if (result) {
response.getWriter().write("success delete!");
}
}

Ajax请求数据与删除数据后刷新页面的更多相关文章

  1. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  2. MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据

    Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-rud.html 系列教程:MVC5 + EF6 + Boo ...

  3. php处理登录、添加数据、删除数据和修改数据

    php 处理登录 :需要先建一个登录的页面,用form表单就可以很轻松的完成,(这里的示例是我根据数据库现成的表做的 是一个teacher表格 根据老师的工号和姓名登录的) <form acti ...

  4. response 后刷新页面,点击按钮后,禁用该按钮

    一,正常的点击按钮后,将其灰显,全部执行完毕再正常显示. this.btnSave.Attributes.Add("onclick", "if (typeof(Page_ ...

  5. Ajax请求ashx返回各类数据的常见处理方式

    .请求text数据,在success事件中手动解析 前台: $.ajax({ type: "post", url: "checkFile.ashx", data ...

  6. 巧用ajax请求服务器加载数据列表时提示loading

    我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: < ...

  7. Jquery通过ajax请求NodeJS返回json数据

    最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便 ...

  8. Ajax异步调用http接口后刷新页面

    使用Ajax的目的就是提高页面响应速度,无需同步调用,无需整个页面刷新.这里直接在html中使用js来实现: 先获取XMLHttpRequest对象 var xmlHttp; //创建一个xmlHtt ...

  9. Eclipse中java向数据库中添加数据,更新数据,删除数据

    前面详细写过如何连接数据库的具体操作,下面介绍向数据库中添加数据. 注意事项:如果参考下面代码,需要 改包名,数据库名,数据库账号,密码,和数据表(数据表里面的信息) package com.ning ...

随机推荐

  1. Saltstack(二)

    承接上篇博客 配置管理 haproxy的安装部署 创建相关目录 # 创建配置目录 [root@linux-node1 ~]# mkdir /srv/salt/prod/pkg/ [root@linux ...

  2. js中如何获取页面的Url,域名和端口号

    有时候通过获取上个页面的Url来做一个跳转,获取域名防止非正常访问 获取上一个页面的一个URL,这个URL一般做一个页面的跳转 window.location.href <script>w ...

  3. hive表信息查询:查看表结构、表操作等--转

    原文地址:http://www.aboutyun.com/forum.PHP?mod=viewthread&tid=8590&highlight=Hive 问题导读:1.如何查看hiv ...

  4. 【uoj#164】[清华集训2015]V 线段树维护历史最值

    题目描述 给你一个长度为 $n$ 的序列,支持五种操作: $1\ l\ r\ x$ :将 $[l,r]$ 内的数加上 $x$ :$2\ l\ r\ x$ :将 $[l,r]$ 内的数减去 $x$ ,并 ...

  5. 【bzoj1005】[HNOI2008]明明的烦恼 Prufer序列+高精度

    题目描述 给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? 输入 第一行为N(0 < N < = 1000),接下来N行,第i+1行给出第i ...

  6. 【Mybatis】<foreach>标签在mybatis中的使用

    mapper.xml如下: <select id="selectCkspcb" parameterType="java.util.Map" resultT ...

  7. 关于监听与控制设备旋转全解析(UIDeviceOrientationDidChangeNotification)

    一类情况: 初始化app的方向,比如只支持横屏或者竖屏.下面举例只支持竖屏的案例 在app的属性里面手动设置 上面标注了该app支持的方向种类,要是在app里支持Portrait方向,还需要添加以下代 ...

  8. BZOJ1089 [SCOI2003]严格n元树 【dp + 高精】

    Description 如果一棵树的所有非叶节点都恰好有n个儿子,那么我们称它为严格n元树.如果该树中最底层的节点深度为d (根的深度为0),那么我们称它为一棵深度为d的严格n元树.例如,深度为2的严 ...

  9. MySQL 5.5 主从复制

    MySQL 5.5 主从复制的原理.过程   分为同步复制和异步复制,实际复制架构中大部分为异步复制.复制的基本过程如下:  1).Slave上面的IO进程连接上Master,并请求从指定日志文件的指 ...

  10. max os x lighttpd + php + mysql 部署

    手贱,升级了max os x 到Yosemite,系统默认装了nginx,php,开机会自动启动!1 开机启动脚本默认在下面位置: /Library/LaunchDaemons/com.root.ng ...