javascript - 使用 'a' 以 HTML 格式提交表单无效

Question

我尝试通过单击 HTML 中的元素 a 来使用 post 方法提交请求。但它总是会刷新当前页面，甚至 action 也会更新为正确的值。

这就是我提交请求的方式。

$(function() {
    $('.detail a').click(function() {
        $('#cityId').val($(this).data('cid'));
        $('#cityName').val($(this).data('cn'));
        $('#parentIds').val($(this).data('pids'));

        $('#cityForm').submit();
    });
});

我将值传递给隐藏元素以使用 POST 方法提交。在 submit() 之前，我检查了表单的 action 属性是我想要的正确 URL。但是，之后，它并没有重定向到我设置的 URL，它只是刷新了当前页面。

这是我代码中的a:

<a href data-cid="<c:out value='${cc.id}'/>" data-pids="<c:out value='${cc.type}'/>"

这是表单的样子:

<form id="cityForm" method="post" action="<%=basePath%><c:out value='${sp}'/>">

它在 IE 中确实有效。我在网上搜索了一些解决方案，说这是由 Chrome 将其视为同一请求引起的，因此我需要在 URL 后添加时间戳，但对我不起作用。

Answer 1

如果你有一个href属性为空的链接，它将成为当前页面的URL，所以当你点击这样的链接时，页面只会刷新。如果你想将一些 Action 绑定(bind)到 a 元素，你必须阻止它的默认行为，使用 event.preventDefault():

$(function() {
    $('.detail a').click(function(event) {
        event.preventDefault();

        $('#cityId').val($(this).data('cid'));
        $('#cityName').val($(this).data('cn'));
        $('#parentIds').val($(this).data('pids'));

        $('#cityForm').submit();
    });
});