NetBeans IDE Wildfly向导自动创建MYSQL CRUD REST API并编写纯JavaScript REST API客户端

向右看齐 2023-09-30 11:56 11阅读 0赞

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

在数据库中创建表（表名最好为单数英文形式）

CREATE TABLE `book` (
    	`bid` VARCHAR(255) NOT NULL COLLATE 'utf8mb4_unicode_ci',
    	`author` VARCHAR(255) NULL DEFAULT NULL COLLATE 'utf8mb4_unicode_ci',
    	`status` VARCHAR(255) NULL DEFAULT NULL COLLATE 'utf8mb4_unicode_ci',
    	`title` VARCHAR(255) NULL DEFAULT NULL COLLATE 'utf8mb4_unicode_ci',
    	PRIMARY KEY (`bid`) USING BTREE
    )
    COLLATE='utf8mb4_unicode_ci'
    ENGINE=InnoDB
    ;

在NetBeans IDE中创建maven web应用

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

<?xml version="1.0" encoding="UTF-8"?>
    <persistence version="2.2" xmlns="http://xmlns.jcp.org/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/persistence http://xmlns.jcp.org/xml/ns/persistence/persistence_2_2.xsd">
        
        <persistence-unit name="my_persistence_unit" transaction-type="JTA">
            
            <jta-data-source>java:/MySqlDS</jta-data-source>
    
            <properties>
    
            </properties>
    
    
        </persistence-unit>
    </persistence>

把 @Produces(\{MediaType.APPLICATION\_XML, MediaType.APPLICATION\_JSON\})修改成

@Produces(\{MediaType.APPLICATION\_JSON\})，仅使用JSON输出，如下：

/*
     * Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
     * Click nbfs://nbhost/SystemFileSystem/Templates/Classes/Class.java to edit this template
     */
    package com.example.bookrestwildfly.service;
    
    import com.example.bookrestwildfly.Book;
    import java.util.List;
    import javax.ejb.Stateless;
    import javax.persistence.EntityManager;
    import javax.persistence.PersistenceContext;
    import javax.ws.rs.Consumes;
    import javax.ws.rs.DELETE;
    import javax.ws.rs.GET;
    import javax.ws.rs.POST;
    import javax.ws.rs.PUT;
    import javax.ws.rs.Path;
    import javax.ws.rs.PathParam;
    import javax.ws.rs.Produces;
    import javax.ws.rs.core.MediaType;
    
    /**
     *
     * @author Administrator
     */
    @Stateless
    @Path("com.example.bookrestwildfly.book")
    public class BookFacadeREST extends AbstractFacade<Book> {
    
        @PersistenceContext(unitName = "com.example_bookrestwildfly_war_1.0-SNAPSHOTPU")
        private EntityManager em;
    
        public BookFacadeREST() {
            super(Book.class);
        }
    
        @POST
        @Override
        @Consumes({MediaType.APPLICATION_JSON})
        public void create(Book entity) {
            super.create(entity);
        }
    
        @PUT
        @Path("{id}")
        @Consumes({MediaType.APPLICATION_JSON})
        public void edit(@PathParam("id") String id, Book entity) {
            super.edit(entity);
        }
    
        @DELETE
        @Path("{id}")
        public void remove(@PathParam("id") String id) {
            super.remove(super.find(id));
        }
    
        @GET
        @Path("{id}")
        @Produces({MediaType.APPLICATION_JSON})
        public Book find(@PathParam("id") String id) {
            return super.find(id);
        }
    
        @GET
        @Override
        @Produces({MediaType.APPLICATION_JSON})
        public List<Book> findAll() {
            return super.findAll();
        }
    
        @GET
        @Path("{from}/{to}")
        @Produces({MediaType.APPLICATION_JSON})
        public List<Book> findRange(@PathParam("from") Integer from, @PathParam("to") Integer to) {
            return super.findRange(new int[]{from, to});
        }
    
        @GET
        @Path("count")
        @Produces(MediaType.TEXT_PLAIN)
        public String countREST() {
            return String.valueOf(super.count());
        }
    
        @Override
        protected EntityManager getEntityManager() {
            return em;
        }
    
    }

使用POSTMAN测试

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

POSTMAN会提供各种语言参考请求代码：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

编写HTML和JavaScript客户端访问API进行CRUD

<!doctype html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Books</title>
            <link rel="stylesheet" href="style.css" type="text/css">
        </head>
    
        <body>
    
            
            <div class="content">
                <form id="new-book" method="POST" action="">
                    <fieldset>
                        <legend>New Book</legend>
                        <label for="new-book-bid">bid</label>
                        <input id="new-book-bid" type="text" name="book-bid">
                        <label for="new-book-author">author</label>
                        <input id="new-book-author" type="text" name="book-author">
                        <label for="new-book-status">status</label>
                        <input id="new-book-status" type="text" name="book-status">
                        <label for="new-book-status">title</label>
                        <input id="new-book-title" type="text" name="book-title">
                        <input type="submit" value="Save">
                    </fieldset>
                </form>
            </div>
            
            <div class="content">
                <div id="books-table" style="display:table;width:100%;">
                    <div style="display:table-row;">
                        <div id="book-bid-header" style="display:table-cell;"><b>bid</b></div>
                        <div id="book-author-header" style="display:table-cell;"><b>author</b></div>
                        <div id="book-status-header" style="display:table-cell;"><b>status</b></div>
                        <div id="book-title-header" style="display:table-cell;"><b>title</b></div>
                        <div id="book-udpate" style="display:table-cell;"><b> </b></div>
                        <div id="book-delete" style="display:table-cell;"><b> </b></div>
                    </div>
                </div>
            </div>
            
            <script src="script.js"></script>
        </body>
    
    </html>

//var SERVER = 'http://localhost:3001/books';
    var SERVER = 'http://localhost:8080/bookrestwildfly-1.0-SNAPSHOT/webresources/com.example.bookrestwildfly.book';
    
    /*
     Adds an event listener to the submit button. Retreieves attributes from html form and puts them
     into attributes. Checks for nulls. Opens a http request and puts variables in url string. Sends
     request with attributes in url string to the server. Emtpys the table and rebuilds the tale with
     the update rows.
    
     */
    function htmlCreateBook() {
        // Get create form
        var form = document.getElementById('new-book');
    
    
    
        // Add create form event listener
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var bid = document.getElementById('new-book-bid').value || null;
            var author = document.getElementById('new-book-author').value || null;
            var status = document.getElementById('new-book-status').value || null;
            var title = document.getElementById('new-book-title').value || null;
            if (bid === null || author === null || status === null || title === null) {
                emptyForm();
                return;
            }
    
            var data = JSON.stringify({
                "bid": bid,
                "author": author,
                "status": status,
                "title": title
            });
    
    
            var req = new XMLHttpRequest();
            req.withCredentials = true;
            var url = `${SERVER}`;
    
            req.open('POST', url, true);
            req.onload = function () {
                console.log(req.status);
                if (req.status === 204) {
                    emptyForm();
                    emptyBooksTable();
                    htmlReadBooks();
                }
            };
            req.setRequestHeader("Content-Type", "application/json");
            req.send(data);
        });
    }
    function emptyForm() {
        /**
         * Empty new shift form
         */
        document.getElementById('new-book-author').value = null;
        document.getElementById('new-book-status').value = null;
        document.getElementById('new-book-title').value = null;
    }
    
    function htmlReadBooks() {
        /**
         * Build books table from database read over HTML
         */
        var req = new XMLHttpRequest();
        req.open('GET', SERVER, true);
        req.onload = function () {
    
            if (req.status === 200) {
                emptyBooksTable();
                var books = JSON.parse(req.responseText);
                fillBooksTable(books);
            }
        };
        req.send();
    }
    
    function emptyBooksTable() {
        /**
         * Empty books table data
         */
        var table = document.getElementById('books-table');
        Array.from(table.children).slice(1).forEach(function () {
            table.removeChild(table.children[1]);
        });
    }
    
    function fillBooksTable(books) {
        /**
         * Fill books table with data
         */
        books.forEach(function (book) {
            appendBooksTableRow(book);
        });
    }
    
    function appendBooksTableRow(book) {
        /**
         * Append books table row with data
         */
        var bid = book.bid;
        var author = book.author;
        var status = book.status;
        var title = book.title;
    
        // Get table
        var table = document.getElementById('books-table');
    
        // Append table row
        var tableRow = document.createElement('div');
        tableRow.style.display = 'table-row';
        tableRow.width = '100%';
        tableRow.id = `row-${bid}`;
        table.appendChild(tableRow);
    
        // Append book ID table cell
        var bidCell = document.createElement('div');
        bidCell.style.display = 'table-cell';
        var bidInput = document.createElement('input');
        bidInput.id = `book-id-${bid}`;
        bidInput.disabled = true;
        bidInput.name = 'shift-id';
        bidInput.value = bid;
        bidCell.appendChild(bidInput);
        tableRow.appendChild(bidCell);
    
        // Append book first name table cell
        var authorCell = document.createElement('div');
        authorCell.style.display = 'table-cell';
        var authorInput = document.createElement('input');
        authorInput.id = `book-author-${bid}`;
        authorInput.type = 'text';
        authorInput.name = 'book-author';
        authorInput.value = author;
        authorCell.appendChild(authorInput);
        tableRow.appendChild(authorCell);
    
        // Append book last name table cell
        var statusCell = document.createElement('div');
        statusCell.style.display = 'table-cell';
        var statusInput = document.createElement('input');
        statusInput.id = `book-last-name-${bid}`;
        statusInput.type = 'text';
        statusInput.name = 'book-status';
        statusInput.value = status;
        statusCell.appendChild(statusInput);
        tableRow.appendChild(statusCell);
    
        // Append orders assigned table cell
        var titleCell = document.createElement('div');
        titleCell.style.display = 'table-cell';
        var titleInput = document.createElement('input');
        titleInput.id = `book-title-${bid}`;
        titleInput.type = 'text';
        titleInput.name = 'book-title';
        titleInput.value = title;
        titleCell.appendChild(titleInput);
        tableRow.appendChild(titleCell);
    
        // Append update table cell
        var updateCell = document.createElement('div');
        updateCell.style.display = 'table-cell';
        var updateInput = document.createElement('input');
        updateInput.id = `update-${bid}`;
        updateInput.type = 'button';
        updateInput.name = 'update';
        updateInput.value = 'Update';
        updateCell.appendChild(updateInput);
        tableRow.appendChild(updateCell);
    
        // Add update event listener
        updateInput.addEventListener('click', function (e) {
            e.preventDefault();
            var book = {
                bid: bidInput.value,
                author: authorInput.value,
                status: statusInput.value,
                title: titleInput.value
            };
            htmlUpdateBook(book);
        });
    
        // Append book table cell
        var deleteCell = document.createElement('div');
        deleteCell.style.display = 'table-cell';
        var deleteInput = document.createElement('input');
        deleteInput.id = `delete-${bid}`;
        deleteInput.type = 'button';
        deleteInput.name = 'delete';
        deleteInput.value = 'Delete';
        deleteCell.appendChild(deleteInput);
        tableRow.appendChild(deleteCell);
    
        // Add delete event listener
        deleteInput.addEventListener('click', function (e) {
            e.preventDefault();
            htmlDeleteBook(bid);
        });
    }
    
    function htmlUpdateBook(book) {
        /**
         * Update Books table with database update over HTML
         */
        var bid = book.bid;
        var author = book.author;
        var status = book.status;
        var title = book.title;
    
        var data = JSON.stringify({
            "bid": bid,
            "author": author,
            "status": status,
            "title": title
        });
    
    
        var req = new XMLHttpRequest();
        var url = `${SERVER}/${bid}`;
        req.open('PUT', url, true);
        req.onload = function () {
            if (req.status === 204) {
                emptyBooksTable();
                htmlReadBooks();
            }
        };
        req.setRequestHeader("Content-Type", "application/json");
        req.send(data);
    }
    
    function htmlDeleteBook(bid) {
        /**
         * Delete from books table with database delete over HTML
         */
        var req = new XMLHttpRequest();
        var url = `${SERVER}/${bid}`;
        req.open('DELETE', url, true);
        req.onload = function () {
            if (req.status === 204) {
                emptyBooksTable();
                htmlReadBooks();
            }
        };
        req.send();
    }
    
    /**
     * Main
     */
    
    document.addEventListener('DOMContentLoaded', htmlCreateBook());
    document.addEventListener('DOMContentLoaded', htmlReadBooks());

@charset "UTF-8";
    
    body{
        margin: 20px;
        background-color: lightgray;
    }
    
    .content{
        margin: 30px 0px 30px 0px;
    }
    
    div a{
        margin: 0px 30px 0px 0px;
    }
    
    a, a:visited, a:hover, a:active{
        color: blue;
    }

另一种表格形式的JavaScript的客户端：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

<!DOCTYPE html>
    <html>
        <head>
            <title>Books</title>
        </head>
        <body>
    
            <div class="container">
                <h1>Books CRUD</h1>
                <fieldset>
                    <legend>New Book</legend>
                    <form id="addcustomerform">
                        <div class="form-group">
                            <label>bid:</label>
                            <input type="text" name="txtbid" id="txtbid" class="form-control" value="" required="">
                        </div>
                        <div class="form-group">
                            <label>author:</label>
                            <input type="text" name="txtauthor" id="txtauthor" class="form-control" value="" required="">
                        </div>
                        <div class="form-group">
                            <label>status:</label>
                            <input type="text" name="txtstatus" id="txtstatus" class="form-control" value="" required="">
                        </div>
                        <div class="form-group">
                            <label>title:</label>
                            <input type="text" name="txttitle" id="txttitle" class="form-control" value="" required="">
                        </div>
                        <button type="submit" id="btnaddBook" class="btn btn-primary save-btn">Save</button>
    
                    </form>
                </fieldset>
    
                <br />
                <fieldset>
                    <legend>Book List
                    </legend>
                    <table class="table" border="1">
                        <thead>
                            <tr>
                                <th>bid</th>
                                <th>author</th>
                                <th>status</th>
                                <th>title</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="tblbody">
    
                        </tbody>
                    </table>
                </fieldset>
            </div>
            <script type="text/javascript">
                var SERVER = 'http://localhost:8080/bookwildfly-1.0-SNAPSHOT/resources/com.example.bookwildfly.book';
                document.addEventListener('DOMContentLoaded', function (event) {
                    /**
                     * Build books table from database read over HTML
                     */
                    var req = new XMLHttpRequest();
                    req.open('GET', SERVER, true);
                    req.onload = function () {
    
                        if (req.status === 200) {
                            var books = JSON.parse(req.responseText);
                            /**
                             * Fill books table with data
                             */
                            books.forEach(function (book) {
                                var bid = book.bid;
                                var author = book.author;
                                var status = book.status;
                                var title = book.title;
                                var btneditId = "btnedit" + bid;
                                var btndeleteId = "btndelete" + bid;
                                var tablerow = "<tr Id='" + bid + "'   data-bid='" + bid + "'   data-author='" + author + "' data-status='" + status + "'   data-title='" + title + "'>"
    
                                        + "<td class='td-data'>" + bid + "</td>"
                                        + "<td class='td-data'>" + author + "</td>"
                                        + "<td class='td-data'>" + status + "</td>"
                                        + "<td class='td-data'>" + title + "</td>"
                                        + "<td class='td-data'>" +
                                        "<button id='" + btneditId + "' class='btn btn-info btn-xs btn-editcustomer' onclick='showEditRow(" + bid + ")'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
                                        "<button id='" + btndeleteId + "' class='btn btn-danger btn-xs btn-deleteBook' onclick='deleteBookRow(" + bid + ")'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
                                        + "</td>"
                                        + "</tr>";
    
                                document.getElementById('tblbody').innerHTML += tablerow;
                                document.getElementById('txtbid').value = "";
                                document.getElementById('txtauthor').value = "";
                                document.getElementById('txtstatus').value = "";
                                document.getElementById('txttitle').value = "";
                            });
                        }
                    };
                    req.send();
    
                });
    
                document.getElementById("btnaddBook").addEventListener("click", function (event) {
                    event.preventDefault()
                    var bid = document.getElementById("txtbid").value;
                    var author = document.getElementById("txtauthor").value;
                    var status = document.getElementById("txtstatus").value;
                    var title = document.getElementById("txttitle").value;
                    var data = JSON.stringify({
                        bid: bid,
                        author: author,
                        status: status,
                        title: title
                    });
    
    
                    var req = new XMLHttpRequest();
                    req.withCredentials = true;
                    var url = `${SERVER}`;
    
                    req.open('POST', url, true);
                    req.onload = function () {
                        console.log(req.status);
                        if (req.status === 204) {
                            var btneditId = "btnedit" + bid;
                            var btndeleteId = "btndelete" + bid;
                            var tablerow = "<tr Id='" + bid + "'   data-bid='" + bid + "'   data-author='" + author + "' data-status='" + status + "'   data-title='" + title + "'>"
    
                                    + "<td class='td-data'>" + bid + "</td>"
                                    + "<td class='td-data'>" + author + "</td>"
                                    + "<td class='td-data'>" + status + "</td>"
                                    + "<td class='td-data'>" + title + "</td>"
                                    + "<td class='td-data'>" +
                                    "<button id='" + btneditId + "' class='btn btn-info btn-xs btn-editcustomer' onclick='showEditRow(" + bid + ")'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
                                    "<button id='" + btndeleteId + "' class='btn btn-danger btn-xs btn-deleteBook' onclick='deleteBookRow(" + bid + ")'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
                                    + "</td>"
                                    + "</tr>";
    
                            document.getElementById('tblbody').innerHTML += tablerow;
                            document.getElementById('txtbid').value = "";
                            document.getElementById('txtauthor').value = "";
                            document.getElementById('txtstatus').value = "";
                            document.getElementById('txttitle').value = "";
                        }
                    };
                    req.setRequestHeader("Content-Type", "application/json");
                    req.send(data);
    
    
                });
    
                function showEditRow(bid)
                {
    
                    var BookRow = document.getElementById(bid); //this gives tr of  whose button was clicked
    
                    var data = BookRow.querySelectorAll(".td-data");
    
                    /*returns array of all elements with
                     "row-data" class within the row with given id*/
    
                    var bid = data[0].innerHTML;
                    var author = data[1].innerHTML;
                    var status = data[2].innerHTML;
                    var title = data[3].innerHTML;
                    var btneditId = "btnedit" + bid;
                    data[0].innerHTML = '<input name="txtupdate_bid"  disabled id="txtupdate_bid" value="' + bid + '"/>';
                    data[1].innerHTML = '<input name="txtupdate_author" id="txtupdate_author" value="' + author + '"/>';
                    data[2].innerHTML = '<input name="txtupdate_status" id="txtupdate_status" value="' + status + '"/>';
                    data[3].innerHTML = '<input name="txtupdate_title" id="txtupdate_title" value="' + title + '"/>';
    
                    data[4].innerHTML =
                            "<button class='btn btn-primary btn-xs btn-updateBook' onclick='updateBookRow(" + bid + ")'>" +
                            "<i class='fa fa-pencil' aria-hidden='true'></i>Update</button>"
                            + "<button class='btn btn-warning btn-xs btn-cancelUpdate' onclick='cancelUpdate(" + bid + ")'><i class='fa fa-times' aria-hidden='true'></i>Cancel</button>"
                            + "<button class='btn btn-danger btn-xs btn-deleteBook' onclick='deleteBookRow(" + bid + ")'>"
                            + "<i class='fa fa-trash' aria-hidden='true'></i>Delete</button>"
                }
                function cancelUpdate(bid)
                {
    
                    var btneditId = "btnedit" + bid;
                    var btndeleteId = "btndelete" + bid;
    
                    var BookRow = document.getElementById(bid); //this gives tr of  whose button was clicked
                    var data = BookRow.querySelectorAll(".td-data");
    
                    var author = BookRow.getAttribute("data-author");
                    var status = BookRow.getAttribute("data-status");
                    var title = BookRow.getAttribute("data-title");
    
    
                    data[0].innerHTML = bid;
                    data[1].innerHTML = author;
                    data[2].innerHTML = status;
                    data[3].innerHTML = title;
    
                    var actionbtn = "<button id='" + btneditId + "' class='btn btn-info btn-xs btn-editcustomer' onclick='showEditRow(" + bid + ")'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
                            "<button id='" + btndeleteId + "' class='btn btn-danger btn-xs btn-deleteBook' onclick='deleteBookRow(" + bid + ")'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
                    data[4].innerHTML = actionbtn;
                }
                function deleteBookRow(bid)
                {
    
    
                    var req = new XMLHttpRequest();
                    var url = `${SERVER}/${bid}`;
                    req.open('DELETE', url, true);
                    req.onload = function () {
                        if (req.status === 204) {
                            document.getElementById(bid).remove();
                        }
                    };
                    req.send();
                }
                function updateBookRow(bid)
                {
    
                    var BookRow = document.getElementById(bid); //this gives tr of  whose button was clicked
                    var data = BookRow.querySelectorAll(".td-data");
    
                    var author = data[1].querySelector("#txtupdate_author").value;
                    var status = data[2].querySelector("#txtupdate_status").value;
                    var title = data[3].querySelector("#txtupdate_title").value;
    
    
    
                    var data = JSON.stringify({
                        bid: bid,
                        author: author,
                        status: status,
                        title: title
                    });
    
    
                    var req = new XMLHttpRequest();
                    var url = `${SERVER}/${bid}`;
                    req.open('PUT', url, true);
                    req.onload = function () {
                        if (req.status === 204) {
                            var btneditId = "btnedit" + bid;
                            var btndeleteId = "btndelete" + bid;
    
                            var BookRow = document.getElementById(bid); //this gives tr of  whose button was clicked
                            var data = BookRow.querySelectorAll(".td-data");
    
                            var author = data[1].querySelector("#txtupdate_author").value;
                            var status = data[2].querySelector("#txtupdate_status").value;
                            var title = data[3].querySelector("#txtupdate_title").value;
                            data[0].innerHTML = bid;
                            data[1].innerHTML = author;
                            data[2].innerHTML = status;
                            data[3].innerHTML = title;
                            var actionbtn = "<button id='" + btneditId + "' class='btn btn-info btn-xs btn-editcustomer' onclick='showEditRow(" + bid + ")'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
                                    "<button id='" + btndeleteId + "' class='btn btn-danger btn-xs btn-deleteBook' onclick='deleteBookRow(" + bid + ")'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
                            data[4].innerHTML = actionbtn;
    
                        }
                    };
                    req.setRequestHeader("Content-Type", "application/json");
                    req.send(data);
    
                }
            </script>
        </body>
    </html>

源码下载：

[GitHub - allwaysoft/NetBeans-IDE-Wildfly-MYSQL-CRUD-REST-API-Pure-JavaScript-Client![icon-default.png_t_M276][]https://github.com/allwaysoft/NetBeans-IDE-Wildfly-MYSQL-CRUD-REST-API-Pure-JavaScript-Client][GitHub - allwaysoft_NetBeans-IDE-Wildfly-MYSQL-CRUD-REST-API-Pure-JavaScript-Client_icon-default.png_t_M276_https_github.com_allwaysoft_NetBeans-IDE-Wildfly-MYSQL-CRUD-REST-API-Pure-JavaScript-Client]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/22f687f7f3ba457b93cb998de71af7f7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/a72afc4ce3844485b287e4c229c2133c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/883c5852721d4fe9a571a8da10cdd245.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/b0856075b9b34cb0a0b0762a874b4b53.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/2ca05ececb2440498cda97289c483055.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/48d4391b77b04186915e30097dd77dc8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/ab82f0359f8840faaf11ceadb2435c17.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/9f2f9c50bd804aea971781d42fc36574.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/9ce19139edfb49ff8f98f5f56997d5a0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/466336d99d1444239a2f115b123e49b4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/14cd6508454b4a1d8a6eddc4be0ae2d6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/e136aaed16294a2da65c3f4b0fc5bc5c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/8f652bde7cea492a9dfb35e3dbc65831.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[icon-default.png_t_M276]: https://csdnimg.cn/release/blog_editor_html/release2.0.8/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M276
[GitHub - allwaysoft_NetBeans-IDE-Wildfly-MYSQL-CRUD-REST-API-Pure-JavaScript-Client_icon-default.png_t_M276_https_github.com_allwaysoft_NetBeans-IDE-Wildfly-MYSQL-CRUD-REST-API-Pure-JavaScript-Client]: https://github.com/allwaysoft/NetBeans-IDE-Wildfly-MYSQL-CRUD-REST-API-Pure-JavaScript-Client