javascript - 如何让我的 'Add Item' 按钮在我的 JSP 上工作，以便它可以将数据提交到我的数据库中

Question

希望你们一切都好。我想知道是否有人可以帮助我弄清楚如何使下面的 JSP 页面中的“添加”按钮正常工作，以便将数据添加到数据库中。我试图确保添加的数据显示在表上并插入到我的 MySql 数据库中。我的删除按钮可以正常工作，但我不确定如何使用“添加”按钮来处理这种情况。我希望它提示用户输入书名和作者，然后添加它。

我正在使用 JavaScript 文件来创建按钮的功能，并且使用“删除”按钮效果很好。这就是我制作删除按钮的方法:

$('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 类，该类具有添加书籍和删除书籍的方法，以及具有正确映射的 Controller 类。

示例:

Controller :

@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 中的样子的 snapchat:

最后，这是 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在模态窗口中显示您的表单。因此，在添加按钮的单击事件中，您必须显示模态窗口。

在模态中，您必须有名称字段和按钮，并在按钮中获取字段的值 (var name = $(#myField).val())。

然后，您需要对休息服务进行 Ajax 调用，并将 name 变量传递给 Ajax 请求。在请求的成功回调中，您必须将结果添加到表中:

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

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

在按钮的失败回调中，您可以用适当的消息提醒用户。

希望这对您有所帮助。