a标签组织页面跳转，并且刷新当前页面

Question

点击删除按钮（a标签），会给后天传一个id，我点击之后，会跳转到一个其他页面，怎么阻止跳转，并且重新刷新当前页面，有什么办法吗?

Answer 1

我也碰到了这个问题，不过我是这么解决的

<a href="javascript:void(0);" onclick="delproduct()">

可以在a标签中写入javascript:void(0)来阻止跳转，至于刷新用onclick绑定一个事件，在事件里这样写
function delproduct(){

        var confirm2 = confirm("您确认要删除吗？");
        if (confirm2) {
            /*如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。*/
            location.href = "${pageContext.request.contextPath}/admindel.jsp;
           admindel是你当前页面的相对路径
        }
    }

Answer 2

1、按钮可以不用a链接，用button。非要用a链接，需要阻止默认事件。

clickLink(event){
    event.preventDefault;
    // 执行其他操作
}

2、重新刷新当前页面？你应该是想操作后刷新列表数据。操作后再调用下列表的接口即可。

Answer 3

1、阻止a标签跳转的方式：这里一共总结了5种
第一种：

html code:
<a href="http://www.example.com" onclick="alert('JavaScript Code');return false;">跳转</a>

第二种：

html code:
<a href="http://www.example.com" onclick="test();return false;">跳转</a>
javascript code:
function test(){
    alert('javascript Code');
}

第三种

html code:
<a href="http://www.example.com" onclick="return test();">跳转</a>
javascript code
function test(){
    alert('javascript Code');
}

第四种

html code:
<a href="http://www.example.com" id="link">跳转</a>
javascript code:
let Odom= document.querySelector('#link');
Odom.onclick = function (){
    alert('javascript Code');
    return false;
}

第五中

html code:
<a href="javascript:void(0);" id="link">跳转</a>
javascript code:
let Odom = document.querySelectOr('#link');
Odom.onclick = function (){
    alert('javascript Code');
}

2.可以使用Ajax将删除的数据id发送到后台。后台删除成功之后在回调函数中删除当前的DOM元素即可做到无刷新