Ajax请求数据与删除数据后刷新页面
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请求数据与删除数据后刷新页面的更多相关文章
- Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-rud.html 系列教程:MVC5 + EF6 + Boo ...
- php处理登录、添加数据、删除数据和修改数据
php 处理登录 :需要先建一个登录的页面,用form表单就可以很轻松的完成,(这里的示例是我根据数据库现成的表做的 是一个teacher表格 根据老师的工号和姓名登录的) <form acti ...
- response 后刷新页面,点击按钮后,禁用该按钮
一,正常的点击按钮后,将其灰显,全部执行完毕再正常显示. this.btnSave.Attributes.Add("onclick", "if (typeof(Page_ ...
- Ajax请求ashx返回各类数据的常见处理方式
.请求text数据,在success事件中手动解析 前台: $.ajax({ type: "post", url: "checkFile.ashx", data ...
- 巧用ajax请求服务器加载数据列表时提示loading
我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: < ...
- Jquery通过ajax请求NodeJS返回json数据
最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便 ...
- Ajax异步调用http接口后刷新页面
使用Ajax的目的就是提高页面响应速度,无需同步调用,无需整个页面刷新.这里直接在html中使用js来实现: 先获取XMLHttpRequest对象 var xmlHttp; //创建一个xmlHtt ...
- Eclipse中java向数据库中添加数据,更新数据,删除数据
前面详细写过如何连接数据库的具体操作,下面介绍向数据库中添加数据. 注意事项:如果参考下面代码,需要 改包名,数据库名,数据库账号,密码,和数据表(数据表里面的信息) package com.ning ...
随机推荐
- bzoj3663/4660CrazyRabbit && bzoj4206最大团
题意 给出平面上N个点的坐标,和一个半径为R的圆心在原点的圆.对于两个点,它们之间有连边,当且仅当它们的连线与圆不相交.求此图的最大团. 点数<=2000,坐标的绝对值和半径<=5000. ...
- [BZOJ3223]文艺平衡树 无旋Treap
3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec Memory Limit: 128 MB Description 您需要写一种数据结构(可参考题目标题),来维护一个 ...
- 【题解】CF#713 E-Sonya Partymaker
这题真的想了挺久的,然而到最后也还是没想到怎样处理环的情况……网上竟然也完全没有题解,无奈之下到 CF 的 AC 代码里面去找了一份膜拜了一下.感谢~ 由于觉得这题有一定的难度,自己看代码也看了比较久 ...
- [HNOI2011]XOR和路径 概率期望 高斯消元
题面 题解:因为异或不太好处理,,,因此按位来算,这样最后的答案就是每一位上的值乘对应的权值再求和.本着期望要倒退的原则,,,我们设$f[i]$表示从$i$到$n$,xor和为1的概率.那么观察$xo ...
- VLC for Android 编译过程
首先,给一个VLC的官网链接:VLC-AndroidCompile 上面有编译所需要安装的插件,环境变量的配置等等信息:虽然是英语,但也挺好理解,这里就不再详述:此文主要记录我在编译的过程中遇到的一些 ...
- 【Socket】从零打造基于Socket在线升级模块
一.前言 前段时间一直在折腾基于Socket的产品在线升级模块.之前我曾写过基于.Net Remoting的.基于WCF的在线升级功能,由于并发量较小及当时代码经验的不足一直没有实际应用. ...
- 【CF625E】Frog Fights(模拟)
[CF625E]Frog Fights(模拟) 题面 CF 洛谷 翻译: 有\(n\)只青蛙在一个被分为了\(m\)等分的圆上,对于每份顺时针依次标号. 初始时每只青蛙所在的位置是\(p_i\),速度 ...
- 《Linux内核设计与实现》第1、2章读书笔记
第一章 1.Unix内核特点 十分简洁:仅提供几百个系统调用并且有明确的目的: 在Unix中,大部分东西都被(或者正致力于)被当做文件对待: Unix内核即相关系统工具软件都是用C语言编写的,这使得系 ...
- 代码收藏系列--mysql--创建数据库、数据表、函数、存储过程命令
创建mysql数据库 CREATE DATABASE IF NOT EXISTS `database_name` DEFAULT CHARSET utf8 COLLATE utf8_general_c ...
- spark(一)
一.spark 学习 1. spark学习的三种地方: (1)Spark.apache.org 官方文档 (2)spark的源代码的官方网站 https://github.com/apache/ ...