项目名称: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. 关于jqgrid的一些使用

    1.jqgrid如何切换中英文 在做电力监控系统的时候,根据项目的需要涉及到中英文的切换,一直纠结了好久没有好的办法,虽然我知道可以手动更改引入的js文件就可以更改中英文,但是动态的一直没有办法更改, ...

  2. dojo入门

    1.引入dojo.js dojo的发行包里有4个子目录,要引入的文件是名叫"dojo"的子目录里的dojo.js. 假设你是这样的目录结构: project | +--dojo-l ...

  3. jrebel + myeclipse 实现热部署

    1.什么是jrebel JRebel是一套JavaEE开发工具.JRebel允许开发团队在有限的时间内完成更多的任务修正更多的问题,发布更高质量的软件产品. JRebel是收费软件. Jrebel 可 ...

  4. ArrayList集合长度的问题

    // 每次集合中实际包含的元素个数(count)超过了可包含元素的个数capcity  //的时候集合就会向内存中申请多开启一倍的空间,来保证集合长度够用 static void Main(strin ...

  5. 在List中常用的linq表达式

    为了下面举例方便,先声明一个集合: public List<Model.Resume> GetResumeList() { var list = new List<Model.Res ...

  6. tp3.2博客详情页面查询上一篇下一篇

  7. csharp: DataTable结构相同的比较

    )
 ) * pageSize;
 ; i++)
 {
 DataRow newdr = newdt.NewRow();
 DataRow dr = dt.Rows[i];
 foreach (Dat ...

  8. with和catch改变作用域链

    总结笔记: with和catch会将对象中标识符的解析添加到作用域链的最前端, 标识符的解析就是with()和catch()括号中的对象. var x = 10, y = 10; with ({x: ...

  9. PLC-Heart

  10. ppt写作的注意事项

    PPT推荐字体及大小: 宋体严谨,适合正文,显示最清晰 黑体庄重,适合标题,或者强调区 隶书楷体,艺术性强,不适合投影 如果通过文字排版突出重点:加粗.加大字号.变色 PPT文字太多怎么办? 1.抽象 ...