JavaWeb对话框

制作页面的删除功能时，想要实现点击【删除】弹出确认对话框。目前状态是点击后没有弹出


```Html

                                            <table class="table table-hover text-nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>种类</th>
                                                        <th>文件名</th>
                                                        <th>图片</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr th:each="photo : ${photo}">
                                                        <td th:text="${photo.name}">商品</td>
                                                        <td th:text="${photo.filename}">earth.jpg</td>
                                                        <td><img
                                                            th:src="@{/uploads/stock/{filename}(filename=${photo.filename})}"
                                                            alt="" width="100px"></td>
                                                        <td>

                                                            <form method="POST" th:action="'./photo_delete&'+${photo.id}" id="delete_1">
                                                                <input type="hidden" name="_token"
                                                                       value="XV7tF73lP1V31unyV3Oxkj2siVujlZtLdM6snqO4"><a th:href="'./photo_delete&'+${photo.id}" class="btn btn-danger js-deleteBtn">删除</a>
                                                            </form>

                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>





    // 获取删除按钮元素
    var deleteBtn = document.querySelector('.js-deleteBtn');

    // 绑定点击事件
    deleteBtn.addEventListener('click', function(event) {
        // 阻止默认的链接点击行为
        event.preventDefault();

        // 弹出确认对话框
        var confirmDelete = confirm("确定要删除吗？");

        // 如果用户确认删除，则提交表单
        if (confirmDelete) {
            // 获取表单元素
            var form = document.getElementById('delete_1');
            // 提交表单
            form.submit();
        }
    });

```

在body里面scrip包裹js的内容就行

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<table class="table table-hover text-nowrap">
        <thead>
            <tr>
                <th>种类</th>
                <th>文件名</th>
                <th>图片</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="photo : ${photo}">
                <td th:text="${photo.name}">商品</td>
                <td th:text="${photo.filename}">earth.jpg</td>
                <td><img
                    th:src="@{/uploads/stock/{filename}(filename=${photo.filename})}"
                    alt="" width="100px"></td>
                <td>

                    <form method="POST" th:action="'./photo_delete&'+${photo.id}" id="delete_1">
                        <input type="hidden" name="_token"
                               value="XV7tF73lP1V31unyV3Oxkj2siVujlZtLdM6snqO4"><a th:href="'./photo_delete&'+${photo.id}" class="btn btn-danger js-deleteBtn">删除</a>
                    </form>

                </td>
            </tr>
        </tbody>
    </table>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
         // 获取删除按钮元素
    var deleteBtn = document.querySelector('.js-deleteBtn');

// 绑定点击事件
deleteBtn.addEventListener('click', function(event) {
    // 阻止默认的链接点击行为
    event.preventDefault();

    // 弹出确认对话框
    var confirmDelete = confirm("确定要删除吗？");

    // 如果用户确认删除，则提交表单
    if (confirmDelete) {
        // 获取表单元素
        var form = document.getElementById('delete_1');
        // 提交表单
        form.submit();
    }
});
    </script>
</body>
</html>

js要放到html的下方才能获取到元素

需要把js放在html的body下面；
因为JavaScript是无法操作位于它下方的DOM的，因为此时DOM还没有构建出来。因此最好将script放在body之后，也就是等到所有的HTML都解析完成之后，再进行JavaScript的相关操作。

img


    <table class="table table-hover text-nowrap">
        <thead>
            <tr>
                <th>种类</th>
                <th>文件名</th>
                <th>图片</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="photo : ${photo}">
                <td th:text="${photo.name}">商品</td>
                <td th:text="${photo.filename}">earth.jpg</td>
                <td><img
                    th:src="@{/uploads/stock/{filename}(filename=${photo.filename})}"
                    alt="" width="100px"></td>
                <td>

                    <form method="POST" th:action="'./photo_delete&'+${photo.id}" id="delete_1">
                        <input type="hidden" name="_token"
                               value="XV7tF73lP1V31unyV3Oxkj2siVujlZtLdM6snqO4"><a th:href="'./photo_delete&'+${photo.id}" class="btn btn-danger js-deleteBtn">删除</a>
                    </form>

                </td>
            </tr>
        </tbody>
    </table>
    <script>
    // 获取删除按钮元素
    var deleteBtn = document.querySelector('.js-deleteBtn');
 
    // 绑定点击事件
    deleteBtn.addEventListener('click', function(event) {
        // 阻止默认的链接点击行为
        event.preventDefault();
 
        // 弹出确认对话框
        var confirmDelete = confirm("确定要删除吗？");
 
        // 如果用户确认删除，则提交表单
        if (confirmDelete) {
            // 获取表单元素
            var form = document.getElementById('delete_1');
            // 提交表单
            form.submit();
        }
    });

    </script>

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
您的代码中使用了 document.querySelector('.js-deleteBtn') 获取删除按钮元素，这个方法只会获取页面中第一个匹配的元素，如果有多个删除按钮，只会绑定第一个按钮的点击事件。

解决方法是使用 document.querySelectorAll('.js-deleteBtn') 获取所有的删除按钮元素，然后使用 forEach 方法为每一个按钮绑定点击事件。具体代码如下：

// 获取所有的删除按钮元素
var deleteBtns = document.querySelectorAll('.js-deleteBtn');

// 遍历所有的删除按钮元素，为每一个按钮绑定点击事件
deleteBtns.forEach(function(deleteBtn) {
    deleteBtn.addEventListener('click', function(event) {
        // 阻止默认的链接点击行为
        event.preventDefault();

        // 弹出确认对话框
        var confirmDelete = confirm("确定要删除吗？");

        // 如果用户确认删除，则提交表单
        if (confirmDelete) {
            // 获取当前按钮所在的表单元素
            var form = deleteBtn.closest('form');
            // 提交表单
            form.submit();
        }
    });
});

这里还修改了获取表单元素的方法，使用了 deleteBtn.closest('form') 获取当前按钮所在的表单元素，这样可以确保提交的是正确的表单。

另外，建议将 JavaScript 代码放在页面底部，或者使用异步加载的方式，以提高页面加载速度和用户体验。

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
首先，你的代码中只有一个删除按钮元素，所以即使绑定了点击事件，也只会对第一个删除按钮有效。
正确的做法是给每一个删除按钮元素添加一个唯一的ID，然后在绑定点击事件时获取对应的按钮元素。

你可以在form表单元素中添加一个id属性，然后在删除按钮中通过该id来绑定对应的点击事件。

更新的HTML代码如下：


<table class="table table-hover text-nowrap">
  <thead>
      <tr>
          <th>种类</th>
          <th>文件名</th>
          <th>图片</th>
      </tr>
  </thead>
  <tbody>
      <tr th:each="photo : ${photo}">
          <td th:text="${photo.name}">商品</td>
          <td th:text="${photo.filename}">earth.jpg</td>
          <td><img
                  th:src="@{/uploads/stock/{filename}(filename=${photo.filename})}"
                  alt="" width="100px"></td>
          <td>

              <form method="POST" th:action="'./photo_delete&'+${photo.id}" id="delete_${photo.id}">
                  <input type="hidden" name="_token" value="XV7tF73lP1V31unyV3Oxkj2siVujlZtLdM6snqO4">
                  <a th:href="'./photo_delete&'+${photo.id}" class="btn btn-danger js-deleteBtn" data-id="${photo.id}">删除</a>
              </form>

          </td>
      </tr>
  </tbody>
</table>

接下来，我们需要修改JavaScript代码，获取所有的删除按钮元素，并为每一个按钮元素绑定点击事件。


// 获取所有的删除按钮元素
var deleteBtns = document.querySelectorAll('.js-deleteBtn');

// 遍历所有的删除按钮元素，并为每一个按钮元素绑定点击事件
deleteBtns.forEach(function(deleteBtn) {
    // 绑定点击事件
    deleteBtn.addEventListener('click', function(event) {
        // 阻止默认的链接点击行为
        event.preventDefault();

        // 获取要删除的ID
        var id = deleteBtn.getAttribute('data-id');

        // 弹出确认对话框
        var confirmDelete = confirm("确定要删除吗？");

        // 如果用户确认删除，则提交表单
        if (confirmDelete) {
            // 获取对应的表单元素
            var form = document.getElementById('delete_' + id);
            // 提交表单
            form.submit();
        }
    });
});

这样，每个删除按钮都会绑定对应的点击事件，并弹出确认对话框。如果用户确认删除，则提交对应的表单。
如果我的回答解决了您的问题，请采纳！

你的代码只获取了一个删除按钮元素：

var deleteBtn = document.querySelector('.js-deleteBtn');

这样只会获取到第一个符合.js-deleteBtn选择器的元素。如果有多个删除按钮，其他的就无法弹出确认对话框。

解决方法是遍历所有删除按钮元素，为每个按钮都绑定点击事件。可以使用querySelectorAll方法获取所有.js-deleteBtn元素，然后使用forEach方法遍历。修改代码如下：

// 获取所有删除按钮元素
var deleteBtns = document.querySelectorAll('.js-deleteBtn');

// 遍历所有按钮元素，为每个按钮绑定点击事件
deleteBtns.forEach(function(deleteBtn) {
    deleteBtn.addEventListener('click', function(event) {
        // 阻止默认的链接点击行为
        event.preventDefault();

        // 弹出确认对话框
        var confirmDelete = confirm("确定要删除吗？");

        // 如果用户确认删除，则提交表单
        if (confirmDelete) {
            // 获取表单元素
            var form = document.getElementById('delete_1');
            // 提交表单
            form.submit();
        }
    });
});

这样就可以为所有删除按钮元素都绑定点击事件，实现弹出确认对话框的功能了。

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7476708
  • 这篇博客你也可以参考下：JavaWeb开发~模拟简单的用户登录验证功能(实现一个请求路径，跳转或返回其他页面的内容)
  • 除此之外, 这篇博客: JavaWeb新闻发布系统案例1中的 分页功能 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 您还可以看一下 黄菊华老师的javaweb仓库出入库系统 毕业设计 毕设 源代码 使用教程课程中的 数据库导入、设置和发布系统小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    在JavaWeb页面制作一个删除功能的确认对话框的具体解决方案如下：

    1. 在前端页面的删除按钮添加一个点击事件，监听到点击后弹出一个确认框，如：
    <button onclick="confirmDelete()">删除</button>

<script>
function confirmDelete() {
    if (confirm("确定要删除吗?")) {
        // 执行删除操作
    }
}
</script>
    1. 在JavaWeb的后端代码中处理删除功能。可以在控制器中接收到删除按钮的请求，然后调用服务层的删除方法，如：
    @RequestMapping("/delete")
public String deleteUser(@RequestParam("id") Integer id) {
    userService.deleteUserById(id); // 删除方法在userService中实现
    return "redirect:/user/list"; // 删除后重定向到用户列表页面
}

    其中@RequestParam注解可以从请求参数中获取到id的值。

    需要注意的是，在删除操作完成后需要跳转到另外一个页面，否则删除后会停留在删除页面。

javascript 放到html head中间

可以正常调取其弹框呀。 ？？？？？？？？？？？？？？？

以下答案由GPT-4.5Plus大模型(语音)与博主A努力中.......共同编写：

根据代码,问题出在:

  1. 获取删除按钮元素 var deleteBtn = document.querySelector('.js-deleteBtn');
    应该是:
var deleteBtn = document.querySelectorAll('.js-deleteBtn');

因为有多行,需要获取所有删除按钮的nodeList,而不是单个元素。
2. 绑定点击事件 deleteBtn.addEventListener('click', function(event) {
应该是:

deleteBtn.forEach(function(btn){
    btn.addEventListener('click', function(event) {

需要遍历所有按钮,分别绑定点击事件。
3. 弹出确认对话框 var confirmDelete = confirm("确定要删除吗?");
应该在点击事件的回调函数中弹出:

btn.addEventListener('click', function(event) {
     var confirmDelete = confirm("确定要删除吗?");
     // ...
}

修正后的代码如下:

js
// 获取删除按钮元素
var deleteBtn = document.querySelectorAll('.js-deleteBtn');  

// 遍历所有按钮,绑定点击事件         
deleteBtn.forEach(function(btn){
    btn.addEventListener('click', function(event) {
        // 阻止默认的链接点击行为 
        event.preventDefault();

        // 弹出确认对话框
        var confirmDelete = confirm("确定要删除吗?");

        // 如果用户确认删除,则提交表单
        if (confirmDelete) {  
            // 获取表单元素
            var form = event.target.closest('form');  
            // 提交表单
            form.submit(); 
        }
    });
});

该代码可以正常弹出确认对话框,并在点击确认后提交表单删除对应数据。

请检查修正后的代码,如果仍有其他问题请提出,我将继续提供帮助。