我可以/如何使用带有 if 语句的 OnClick 吗？

Question

我正在尝试创建一个按钮，按下该按钮会删除一个数据库条目，当我点击它时，我想要一条消息说“你确定要删除它吗”，然后如果我点击取消，消息就会消失，什么也没有发生，如果我点击 OK 删除运行 - 但也它重新加载页面，我认为这将需要一个 jquery（这是我希望它在） if 语句基本上说 if单击确定然后运行默认值并在代码运行后刷新页面。

目前为止

<button name="del" type="submit" value="1" onclick="return confirm('Are you sure you want to delete this?') "> delete</button>

请告诉我我是否走错了路，如果我没有，请帮助我如何写如果，（我实际上已经搜索过这个信息，但信息不够完整，我无法理解, 我是一名 PHP 开发人员，以前从未使用过任何 Javascript，但想开始）

编辑：如果这是一个缓存问题，我该如何解决？

Answer 1

您的确认很好。 但是，当您按“确定”时，您基本上执行了 2 个请求。

我会选择以下两种方式之一：

1。 回发到同一页面并在生成页面数据之前使用 PHP 处理 $_POST 数据。伪代码：

if($_POST['userid']!= null)
    deleteUser($_POST['userid']);
getUsers();

2。 使用 Javascript 向另一个页面发出 Ajax 请求，该页面会删除您的用户。然后在“完成”事件中，让 JS 重新加载您当前所在的页面。

我认为选项 2 是最好的。它也会让你更多地接触 JavaScript。

$.ajax({
  url: "deleteuser.php?userid=1",
}).done(function() {
  location.reload();
});

或 $.post 的等价物 您甚至不需要重新加载页面。您可以使用 Javascript 删除包含您刚刚删除的用户的行。 这当然使用 jQuery，但 jQuery 只是 Javascript 的包装器

Answer 2

我相信您的问题更多是缓存问题，并且在提交表单后重新加载页面效率不高，因为您正在执行不必要的服务器往返，但是如果这是您想要的，这里有一种方法：

PS：删除提交按钮上的onclick 属性。

document.addEventListener('DOMContentLoaded', function () {
    initDeletionPage(document.getElementById('the-id-of-the-form-to-target'));
});

function initDeletionPage(deletionForm) {
    refreshPageIfNeeded();
    deletionForm.addEventListener('submit', onSubmit);

    function refreshPageIfNeeded() {
        if (sessionStorage.getItem('pageRefreshNeeded')) {
            sessionStorage.removeItem('pageRefreshNeeded');
            location.reload();
        }
    }

    function onSubmit(e) {
        if (!confirmDeletion()) e.preventDefault();
        else indicatePageRefreshNeededAfterSubmission();
    }

    function confirmDeletion() {
        return confirm('Are you sure you want to delete this?');
    }

    function indicatePageRefreshNeededAfterSubmission() {
        sessionStorage.setItem('pageRefreshNeeded', true);
    }
}

抱歉，我要求使用更多 Jquery 方式

好的...

$(function () {
    initDeletionPage('#the-id-of-the-form-to-target');
});

function initDeletionPage(deletionForm) {
    refreshPageIfNeeded();
    $(deletionForm).submit(onSubmit);

    function refreshPageIfNeeded() {
        if (sessionStorage.getItem('pageRefreshNeeded')) {
            sessionStorage.removeItem('pageRefreshNeeded');
            location.reload();
        }
    }

    function onSubmit(e) {
        if (!confirmDeletion()) e.preventDefault();
        else indicatePageRefreshNeededAfterSubmission();
    }

    function confirmDeletion() {
        return confirm('Are you sure you want to delete this?');
    }

    function indicatePageRefreshNeededAfterSubmission() {
        sessionStorage.setItem('pageRefreshNeeded', true);
    }
}