项目名称: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. Oracle 客户端、服务器、数据库、数据库对象(表、视图等)的关系

    1.数据库服务器 所谓数据库服务器,只是在机器上安装了一个数据库管理软件,这个软件可以管理多个数据库.一般开发人员会针对每一个应用创建一个数据库 2.单实例数据库模式下的数据库服务器.数据库.数据库实 ...

  2. Docker原理（开发技术分享转发）

    Docker原理Docker是啥Docker是一个程序运行.测试.交付的开放平台,Docker被设计为能够使你快速地交付应用.在Docker中,你可以将你的程序分为不同的 基础部分,对于每一个基础部分 ...

  3. 最强json解析工具

    [原]http://blog.csdn.net/xiaoguomumu/article/details/75255629 感觉上面的链接所说,需要传一个T进去,也就是先要构造T,感觉麻烦 可以不这样做 ...

  4. [转]python中对文件、文件夹的操作——os模块和shutil模块常用说明

    转至:http://l90z11.blog.163.com/blog/static/187389042201312153318389/ python中对文件.文件夹的操作需要涉及到os模块和shuti ...

  5. MySQL关联left join 条件on与where不同

    以下的文章主要讲述的是MySQL关联left join 条件on与where 条件的不同之处,我们现在有两个表,即商品表(products)与sales_detail(销售记录表).我们主要是通过这两 ...

  6. Guid和Oracle中16进制字符的转换

    我们知道在Oracle中存的guid是16进制字符串,而在我们的C#代码中存的是guid对象,这样我会就要进行转换, 下面给出了两者进行转换的方法: public class Guid2RawProc ...

  7. RegExp正则表达式内容

    在线测试工具:http://leaverou.github.io/regexplained/ RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具. 直接量语法:/pattern/at ...

  8. Dictionary集合 字典

    1 Dictionary<int, string> dic = new Dictionary<int, string>(); dic.Add(,"张三"); ...

  9. Log4Net 之初体验

    今天试了一下关于日志的一个插件——Log4Net 关于这个插件就不过多描述了,有很多人用,也挺好用比较方便,所以在此记录下使用过程. 一.建一个mvc 空网站 名字叫 Log4NetTest 二.下载 ...

  10. 使用java applet通过签名访问客户端串口

    前端时间公司有需求要访问客户端串口读取电子称的数据,通过网上资料,决定使用applet通过电子签名的形式实现. 1.先写applet:这里我是使用RXRTcomm.jar LocalFileApple ...