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类，它具有添加书籍和删除书籍的方法，以及具有正确映射的控制器类。

示例：

控制器：

@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框架< / strong>（Angularjs，ReactJS等）否则你将被困在许多spaghetti JS代码中来处理你的UI逻辑。

For Now：您可以使用轻量级模态插件remodal在模态窗口中显示表单。因此，在添加按钮的点击事件中，您必须显示模态窗口。

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

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

success(function(data){/*returned data from REST service*/ $('#myTable').append(/* HTML OF YOUR NEW ROW */); })

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

我希望这有用。

如何获取我的“添加项目”按钮来处理我的JSP，以便它可以将数据提交到我的数据库

1 个答案: