关于对a标签使用了AJAX后页面还是跳转到连接页面的问题_a 标签点击执行ajax后再跳转a标签的链接-CSDN博客

本文链接：https://blog.csdn.net/xy862578733/article/details/102527518

今天用AJAX编程发现对a标签使用了AJAX后页面还是跳转到href链接的页面，找错找了半个小时，发现缺少了return false语句，使得单击事件触发后没有取消！！！
源码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
	div:not(#details){
		width: 200px;
		height: 100px;
	}
	#details{
		width: 500px;
		height: 200px;
		background: yellow;
	}
</style>
<script type="text/javascript" src="../Demo1/jquery-3.4.1.js"></script>
<script type="text/javascript">
	$(function() {
		$("a").click(function() {
			var url = this.href;
			var args = {"time" : new Date()};
			$.get(url , args , function(data){
				var name = $(data).find("name").text();
				var intro = $(data).find("intro").text();
				
				$("#details").empty().append($("<h2>" + name + "</h2><span>" 
						+ intro +"</span>" ));
			})
		})
	})
</script>
</head>


<body>
	<div id = "name1">
		<a href="position/Andy.xml">Andy</a>
	</div>
	<div id = "name2">
		<a href="position/Sam.xml">Sam</a>
	</div>
	<div id = "name3">
		<a href="position/Ming.xml">Ming</a>
	</div>
	<div id = "details">
	
	</div>
</body>
</html>

改错后的代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
	div:not(#details){
		width: 200px;
		height: 100px;
	}
	#details{
		width: 500px;
		height: 200px;
		background: yellow;
	}
</style>
<script type="text/javascript" src="../Demo1/jquery-3.4.1.js"></script>
<script type="text/javascript">
	$(function() {
		$("a").click(function() {
			var url = this.href;
			var args = {"time" : new Date()};
			$.get(url , args , function(data){
				var name = $(data).find("name").text();
				var intro = $(data).find("intro").text();
				
				$("#details").empty().append($("<h2>" + name + "</h2><span>" 
						+ intro +"</span>" ));
			})
			return false;           //缺少了这个语句！！！！
		})
	})
</script>
</head>


<body>
	<div id = "name1">
		<a href="position/Andy.xml">Andy</a>
	</div>
	<div id = "name2">
		<a href="position/Sam.xml">Sam</a>
	</div>
	<div id = "name3">
		<a href="position/Ming.xml">Ming</a>
	</div>
	<div id = "details">
	
	</div>
</body>
</html>