项目名称: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. (转)PEP 8——Python编码风格指南

    PEP 8——Python编码风格指南标签(空格分隔): Python PEP8 编码规范原文:https://lizhe2004.gitbooks.io/code-style-guideline-c ...

  2. isqlplus的使用

    1 再安装Oracle的机器上开启服务[命令services.msc] 2 浏览器输入下面的网址: 虚拟机[安装orcale的机器]:http://localhost:5560/isqlplus/ 本 ...

  3. java泛型中的各种限制

    java和其他语言一样,都支持泛型,包括泛型类和泛型方法,但是java的泛型比较特殊.因为java的泛型并不是在java诞生之初就加入的,在很长的一段时间里,java是没有泛型的,在需要泛型的地方,统 ...

  4. Smart3D基础理论

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

  5. nyoj 139——我排第几个|| nyoj 143——第几是谁？ 康托展开与逆康托展开

    讲解康托展开与逆康托展开.http://wenku.baidu.com/view/55ebccee4afe04a1b071deaf.html #include<bits/stdc++.h> ...

  6. 《C#高效编程》读书笔记02-用运行时常量(readonly)而不是编译期常量(const)

    C#有两种类型的常量:编译期常量和运行时常量.两者有截然不同的行为,使用不当的话,会造成性能问题,如果没法确定,则使用慢点,但能保证正确的运行时常量. 运行时常量使用readonly关键字声明,编译期 ...

  7. java字节码速查笔记

    java字节码速查笔记  发表于 2018-01-27 |  阅读次数: 0 |  字数统计: |  阅读时长 ≍ 执行原理 java文件到通过编译器编译成java字节码文件(也就是.class文件) ...

  8. javaSystem.out.println()输出byte[]和char[]异常的问题

    javaSystem.out.println()输出byte[]和char[]异常的问题 今天 突然有人问我他写的byte[]和char[],在用System.out.println()输出的时候所得 ...

  9. 日期函数new Date()浏览器兼容性问题

    项目上与时间相关的地方特别多,与时间格式相关都使用了moment.js轻量级日期处理库,在开发中出现了几次浏览器兼容性问题,所以总结一下new Date()和moment.js在各大浏览器中兼容性问题 ...

  10. Bootstrap拟态框+支付宝首页

    任务没完成,继续来!因为刚才网不好,我辛辛苦苦打了洋洋洒洒一大堆都没了! 我们今天主要是说一个简单的由Bootstrap和HTML5结合而成的小案例: 首先:由标题可得知,这是移动端,所以需要这样一串 ...