项目名称:Bookstore

UI界面

项目文件

操作:

jsp代码

<%@ page import="dao.BookDAO" %>

<%@ page import="entity.Book" %><%--

  Created by IntelliJ IDEA.

  User: 邦杠

  Date: 2018/8/15

  Time: 19:54

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

  <head>

    <title>$Title$</title>

  </head>

  <style>

    html,body{width:100%;height: 100%}

    table{width: 1150px;height:500px;margin: auto}

    table,td,th{border: 1px solid #e6e6e6;border-collapse:collapse; }

    body{-moz-background-size:100% 100%;

      background-size:100% 100%;

      background-image:url("link.jpg");

      background-repeat: no-repeat}

    * { margin: 0; padding: 0; }

    table { border-collapse: collapse; text-align: center;  }

    /*关键设置 tbody出现滚动条*/

    table tbody {

      display: block;

      height: 500px;

      overflow-y: scroll;overflow-x:hidden;

    }

    table thead,  tbody tr { display: table;width: 100%; table-layout: fixed;  }

    table thead th {  height: 40px  }

    table tbody td {height: 30px }

    td input{margin-left: 5px;width: 40px}

  </style>

  </head>

  <body>

  <marquee><h1 style="color:white;">本页面用原生ajax进行展示</h1></marquee>

  <table width="80%" border="1">

    <thead>

    <tr>

      <th style="width:230px">编号</th>

      <th style="width:231px">书名</th>

      <th style="width:231px">作者</th>

      <th style="width:231px">价格</th>

      <th style="width:249px">操作</th>

    </tr>

    <tr>

      <td colspan="5"><input onclick="insert()" type="button"value="添加新数据" style="width:100%;height:40px;margin: 0px" ></td>

    </tr>

    </thead>

    <tbody id="tbody">

    </tbody>

  </table>

  </body>

 <script>

   window.onload=function () {

       select();

   }

   function insert() {

       window.location.href=("insert.jsp");

   }

   function update(id) {

       window.location.href=("BookUpdate?id="+id);

   }

   function dele(id) {

       if(confirm("是否真的删除?")){

           var ajax=new XMLHttpRequest();

           ajax.open("get","BookDelete?id="+id);

           ajax.send(null);

           ajax.onreadystatechange=function () {

               console.log(ajax.readyState);

               console.log(ajax.status);

               if(ajax.readyState == 4 && ajax.status == 200){

                 if(ajax.responseText){

                     alert("删除成功");

                     select();

                 }

                }

           }

       }

   }

    function sele(id){

        window.location.href=("BookUpdate?sele=sele&id="+id);

    }

   function select() {

       //创建对象

      var ajax=new XMLHttpRequest();

      //http请求

      ajax.open("get","BookSelect.do")

       //发送请求 (get为null post为参数)

       ajax.send(null);

      //设置状态

      ajax.onreadystatechange=function () {

          if(ajax.readyState == 4 && ajax.status == 200){

              var data=JSON.parse(ajax.responseText);

              var tbody=document.getElementById("tbody");

              tbody.innerHTML="";

              console.log(data.data.length);

              for(var i=0;i<data.data.length;i++){

                  var tr=document.createElement("tr");

                  var tdid=document.createElement("td");

                  var tdname=document.createElement("td");

                  var tdprice=document.createElement("td");

                  var tdcc=document.createElement("td");

                  //创建按钮

                  var inputse=document.createElement("input");

                  inputse.value="详细";

                  inputse.setAttribute("onclick", "sele("+data.data[i].id+");");

                  var inputde=document.createElement("input");

                  inputde.value="删除";

                  inputde.setAttribute("onclick", "dele("+data.data[i].id+");");

                  var inputup=document.createElement("input");

                  inputup.value="修改";

                  inputup.setAttribute("onclick", "update("+data.data[i].id+");");

                  inputup.type=inputde.type=inputse.type="button";

                  //添加进入

                  var thid=document.createTextNode(data.data[i].id);

                  var thname=document.createTextNode(data.data[i].name);

                  var thprice=document.createTextNode(data.data[i].price);

                  var thcc1=document.createTextNode(inputse);

                  var thcc2=document.createTextNode(inputde);

                  var thcc3=document.createTextNode( inputup);

                  tdcc.appendChild(inputse);

                  tdcc.appendChild(inputde);

                  tdcc.appendChild(inputup);

                  tdid.appendChild(thid);

                  tdname.appendChild(thname);

                  tdprice.appendChild(thprice);

                 tr.appendChild(tdid);

                 tr.appendChild(tdname);

                 tr.appendChild(tdprice);

                 tr.append(tdcc);

                  tbody.append(tr);

              }

          }

      }

   }

 </script>

</html>

项目下载地址:https://github.com/weibanggang/Book

idea原生ajax数据处理(增删改查)的更多相关文章

  1. ajax参考增删改查

    AJAX做增删改查详细!   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. vue实战(一):利用vue与ajax实现增删改查

    vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...

  3. iOS使用sqlite3原生语法进行增删改查以及FMDB的使用

    首先要导入libsqlite3.dylib并且加入头文件#import <sqlite3.h>,在进行增删改查之前还要先把数据库搞进去. 一种方法是从外面拷贝到程序里:http://www ...

  4. MVC中的Ajax与增删改查

    自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...

  5. MVC中的Ajax与增删改查（一）

    自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...

  6. AJAX做增删改查详细！

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. （五）JPA - 原生SQL实现增删改查

    6.原生SQL JPA除了对JPQL提供支持外,还对原生SQL语句也提供了支持.下面小节一起来看看吧. 6.1 查询单个 示例代码: @Test public void getSingle() { E ...

  8. 通过Ajax实现增删改查

    项目链接:https://github.com/shuai7boy/Ajax_CRUD 简要截图:

  9. MVC中的Ajax与增删改查(二)

    上一篇记录的是前台操作,下面写一下后台 ,本来自认为是没有必要做补充,毕竟思路啥的都有,实际上在做删除操作的时候,折腾了一天,还是自己太嫩,逻辑不够严谨,这里作下记录. 关于表结构这里再作下说明: ① ...

随机推荐

  1. nodejs基础知识查缺补漏

    1. 单线程.异步I/O.对比php nodejs是单线程的,但是是异步I/O,对于高并发时,它也能够快速的处理请求,100万个请求也可以承担,但是缺点是非常的耗内存,但是我们可以加大内存, 所以能用 ...

  2. GitHub(hexo)博客页面访问量错误以及中文乱码解决

    如果访问量不显示(乱码形状),是因为不蒜子域名更新,所以你的域名也需要更新 <script async src="//busuanzi.ibruce.info/busuanzi/2.3 ...

  3. Smart3D基础理论

    目录: 1. Smart3D发展进程 2. 硬件要求与建模原理 3. Smart3D建模优势 4.Smart3D的应用领域 5. Smart3D的软件组成 6. Samrt3D主控台概述 1. Sma ...

  4. 模糊查询-动态参数，防SQL注入

    WHERE("title like '%'+#{keyWord}+'%'"); -MS SQL WHERE("title like concat('%',#{keyWor ...

  5. Mac下抓包工具Charles4.0下载及使用

    Charles是一款运行在你自己计算机上的web代理工具,可以有效地获取http通信信息,主要用于网页的开发和调试等. 安装 以下为来自史蒂芬周的博客的Charles 4.0 Mac破解版 下载地址: ...

  6. stark——增删改页面

    一.制作添加页面 1.前置准备 (1)修改增删改的视图函数名 class ModelStark(object): def add_view(self, request): return HttpRes ...

  7. js简单实现表格排序

    昨天看到一篇关于表格排序的随笔,鉴于本人还只会简单的js,不会使用封装,所以自己也试了一下写这个效果.可能不太优化,原理思路是:获取行对象tr,排序tr中要比较的对象td,排序后添加回tbody.如下 ...

  8. Jmeter各部件的作用

    JMeter主要组件介绍 1.测试计划(Test Plan)是使用 JMeter 进行测试的起点,它是其它 JMeter 测试元件的容器. 2.线程组(Thread Group)代表一定数量的并发用户 ...

  9. 爬虫之绘图matplotlib与词云(七)

    1 绘制条形图 import matplotlib # 数据可视化 from matplotlib import pyplot as plt # 配置字体 matplotlib.rcParams[&q ...

  10. HTML <meta> Attribute

    HTML <meta> Attribute http-equiv 定义和用法 The http-equiv attribute provides an HTTP header for th ...