项目名称: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. js判断触摸方向

    $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.original ...

  2. Win2D 官方文章系列翻译 - 预乘 Alpha

    本文为个人博客备份文章,原文地址: http://validvoid.net/win2d-premultiplied-alpha/ 在计算机绘图中有两种表示颜色值不透明度的方法.Win2D 中两种方法 ...

  3. MVC页面简单post提交

    页面代码 <script src="~/Scripts/jquery-1.10.2.js"></script> <script> $(funct ...

  4. Sturct类型装箱时会遇到的问题

    Object在拆箱时会在栈空间生成一个临时变量.所以Struct在使用时尽量将内容都声明为readonly为好 [<Struct>] type Point= val mutable X:d ...

  5. IDEA安装及破解永久版教程————鹏鹏

    ---恢复内容开始--- 首先我们先来介绍下什么是IDEA? IDEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境.IntelliJ在业界被公认为最好的java开发工具之一,尤 ...

  6. owin解决跨域js请求

    最近在用owin打了一个建议的http的api服务,但遇到了js跨域访问的问题,后来在网上找到了答案,已帮助遇到此问题的人 1.首先nuget先按着owin依赖的包,然后至关重要的一步是引用Micro ...

  7. web应用开发周期

    web应用开发周期 1. 前期准备 2. 编码 3. 上线 4. 数据分析 5. 持续交付 6. 遗留系统 7. 回顾与新架构 重构的一般性因素 1. 系统难以维护 2. 系统技术栈难以符合业务需求 ...

  8. Sass学习笔记（三）

    一.Sass的控制命令 二.Sass的函数功能 sass中除了可以定义变量,还自备了一系列函数功能,主要包括:字符串函数.数字函数.列表函数.颜色函数.Instrospection函数.三元函数等.当 ...

  9. html+css动态篇

    transition过渡 transform旋转 animation动画 一般是父div包含两个子div,一个写鼠标悬浮之前,一个写鼠标悬浮之后, 鼠标悬浮之后的div要写overflow:hidde ...

  10. 《ArcGIS Runtime SDK for Android开发笔记》——（11）、ArcGIS Runtime SDK常见空间数据加载

    ArcGIS Runtime SDK for Android 支持多种类型空间数据源.每一种都提供了相应的图层来直接加载,图层Layer是空间数据的载体,其主要继承关系及类型说明如下图所示: 转载请注 ...