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)

<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!");
        }
    }
时间: 2024-10-11 01:08:00

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

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

Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-rud.html 系列教程:MVC5 + EF6 + Bootstrap3 上一节:MVC5 + EF6 + Bootstrap3 (12) 新建数据 源码下载:点我下载 目录 前言 添加链接 查看详情 编辑数据 删除数据 结尾 前言 所谓万事开头难,前面用两节介绍了查询页面,一节介绍了创建数据.由于前面做了大量的铺垫,本节就能顺利的将查看详情.编辑数据.删

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

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据

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

php 处理登录 :需要先建一个登录的页面,用form表单就可以很轻松的完成,(这里的示例是我根据数据库现成的表做的 是一个teacher表格 根据老师的工号和姓名登录的) <form action="chuli.php" method="post"> <div> 工号: <input type="text" name="tno"/> </div> <div> 姓名:

好友列表右键菜单进行Ajax请求时直接跳转至登陆页面

今天在做右键菜单,当点击重命名进行Ajax请求时,并没有向后台发送数据而是直接跳转到了首页.朕百思不得其解,后来在前台页面发现一个问题: <li><a href='#' onclick="renameContactsFunction()">重命名</a></li> 原来就是这个herf='#'惹的祸.当我点击时候,页面会跳转到'#'这个路径而不是进行Ajax请求.将上面那段代码变成 <li><a onclick=&quo

response 后刷新页面

先要求点按钮生成文件,同时按钮变灰,文件生成好直接打开该文件,按钮可用. 一,给按钮增加点击后变灰,页面刷新变可用属性. 打开文件代码如下: //写出文件 System.Text.Encoding encoding = System.Text.Encoding.GetEncoding("gb2312"); HttpResponse response = HttpContext.Current.Response; response.HeaderEncoding = encoding; r

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

我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/ 这里主要讲jQuery ajax的get,查询数据时,它的结构为: $.aja

QGrid系列教程--查询数据、编辑数据、删除数据

查询数据 在ProcessRequest 函数下修改: public void ProcessRequest(HttpContext context) { //查找 if (context.Request.Params.Get("_search") == "true") { return; } NameValueCollection forms = context.Request.Form; string strOperation = forms.Get("

MYSQL——自动编号,增加列,删除列,插入数据,删除数据,修改数据

在创建的时候 CREATE TABLE si( Id INT AUTO_INCREMENT ) 自动编号,不可以有多个自动列的(可以自动帮你编码) 假如以创号一个表格s11往里面增加一个列(这种属于改结构了的跟插入数据不一样的) ALTER TABLE hh2 ADD COLUMN( adde INT, adder VARCHAR(11) ) 删除s11里面的adde列 alter table 表名 drop column 列名; 改结构: ALTER TABLE 表名 MODIFY 列名  要

sqlite学习笔记5:插入数据,查询数据和删除数据

曾闻:全部的编程都是已数据为中心,觉得很有道理. 所谓数据库数据库,没有数据叫什么数据库,接下来就看看怎样在表中插入数据. 一 插入数据 1 创建一张表 首先为了插入数据,须要先创建一张表: CREATE TABLE COMPANY( ID INT PRIMARY KEY NOT NULL, NAME TEXT NOT NULL, AGE INT NOT NULL, ADDRESS CHAR(50), SALARY REAL ); 2 第一种方式:指定列 插入数据有两种主要的格式,第一种是指定列