如何使我的“添加項目”按鈕在我的JSP上運行，以便它可以將數據提交到我的數據庫中

Question

希望你們一切都好。 我想知道是否有人可以幫助我弄清楚如何才能使下面的JSP頁面中的“添加”按鈕正常工作，以便它可以將數據添加到數據庫中。 我試圖確保添加的數據既顯示在表上，又插入到MySql數據庫中。 我有刪除按鈕可以正常工作，但不確定如何使用“添加”按鈕來處理這種情況。 我希望它提示用戶輸入書名和作者，然后添加。

我正在使用JavaScript文件創建按鈕的功能，並且使用Delete按鈕就可以了。 這就是刪除按鈕的實現方式：

$('span.deleteall').on('click', function(e){
    e.preventDefault();
    var mediaPageName = window.location.pathname;
    var mediaType = null;
    if(mediaPageName.includes('books')){
        mediaType = 'Book';
    }else if(mediaPageName.includes('movies')){
        mediaType = 'Movie';
    }else if(mediaPageName.includes('music')){
        mediaType = 'Music';
    }else if(mediaPageName.includes('contacts')){
        mediaType = 'Contact';
    }
    var $this = $(this), 
        $trows = $this.closest('table').children('tbody').find('tr.selected'),
        sel = !!$trows.length;
    // Don't confirm delete if no rows selected.
    if(!sel){
        alert('No rows selected');
        return false;
    }
    var c = confirm('Are you sure you want to delete the slected rows?');
    if(!c) { return false; }
    $trows.fadeOut(function(){ $trows.remove(); zebra(); deleteFromDatabase(mediaType,$trows.find('td:last').text());});
});

我認為我必須對JS文件中的“添加”按鈕做類似的操作，但令我感到困惑的是如何創建一個新的提示，要求用戶在提交前輸入標題和作者。

我還使用了HibernateDAO.java類，該類具有添加書和刪除書的方法，以及具有適當映射的控制器類。

例：

控制器：

@RequestMapping(value="/deleteBook/{booksKey}", method= RequestMethod.POST)
    public void deleteBook(@PathVariable String booksKey, HttpServletRequest request){
        System.out.println("BOOK KEY TO DELETE:" + booksKey);
        HibernateDataDAO dao = new HibernateDataDAO();
        int intBooksKey = Integer.parseInt(booksKey);
        dao.deleteBooks(intBooksKey);
    }
@RequestMapping(value="/addBook/{booksKey}", method = RequestMethod.POST)
    public void addBook(@PathVariable String booksKey, HttpServletRequest request){
        System.out.println("BOOK KEY TO ADD:" + booksKey);
        HibernateDataDAO dao = new HibernateDataDAO();
        int intBooksKey = Integer.parseInt(booksKey);
        dao.addBooks(intBooksKey);

DAO類：

public void deleteBooks(int booksKey){
    createDatabaseConnection();
    Statement stmt = null;
    String sqlQuery = "DELETE FROM books " +
                 "WHERE booksKey =" + booksKey;
    try {
        stmt = conn.createStatement();
        stmt.executeUpdate(sqlQuery);
        System.out.println("Deleted book key: " + booksKey);
    } catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } 

public void addBooks(int booksKey){
        createDatabaseConnection();
        Statement stmt = null;
        **String sqlQuery = "";**
    try{
        stmt = conn.createStatement();
        stmt.executeUpdate(sqlQuery);
        System.out.println("Added book key: " + booksKey);
    } catch (SQLException e){
        e.printStackTrace();
    }

我不確定如何正確地為上面的addBooks方法編寫SQL查詢。

另外，以下是我的數據庫在MySQL中的樣子：

最后，這是我的JSP頁面上的按鈕的代碼：

 <th colspan="2"><span href="javascript:;" id= "formsubmit" class="btn btn-default deleteall" title="dtable">Delete Selected Items</span></th>
 <th colspan="2"><a href="#" class="btn btn-default">Add Item</a></th>

如果有人可以告訴我如何使“添加”按鈕正常工作，或者至少告訴我如何進行編碼，以提示用戶輸入“標題”和“作者”，那肯定會有所幫助，並且可以很好地理解如何完成這個。 我相信這與JS文件和JSP有更多關系。 我在JS方面真的很虛弱，這就是為什么這對我來說是個問題。

謝謝 ：）

Answer 1

首先，如果您要擁有許多屏幕和表格，並且想通過REST Web服務正確更新主題並與后端配合使用，最好使用客戶端UI框架 （Angularjs，ReactJS等），否則您將被許多意大利面條式JS代碼困住以處理您的UI邏輯。

現在：您可以使用輕量級的模式插件remodal在模式窗口中顯示表單。 因此，在添加按鈕的click事件中，您必須顯示模態窗口。

在模式中，您必須具有name字段和一個按鈕，並在該按鈕中獲取字段的值（ var name = $(#myField).val() ）。

然后，您需要對其余服務進行Ajax調用，並將name變量傳遞給Ajax請求。 在請求的成功回調中，必須將結果添加到表中：

success(function(data){/*returned data from REST service*/

    $('#myTable').append(/* HTML OF YOUR NEW ROW */);
})

在按鈕的故障回調中，您可以通過適當的消息提醒用戶。

我希望這是有幫助的。