Uncaught ReferenceError: $ is not defined错误求助（jQuery&Ajax新手）

Hey there! Let's break down why you're hitting this error and fix it right away. That $ is not defined message means your browser doesn't recognize jQuery's alias $—and the root cause is super easy to spot once you know where to look.

What's going wrong? #

Take a look at how you're loading jQuery:

<script type="application/json" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

The type="application/json" attribute is incorrect! When the browser sees this, it treats the jQuery file as JSON data instead of executable JavaScript. So jQuery never actually loads, and your code can't find the $ function.

The Fix #

Change the type attribute to text/javascript (the correct type for JS files), or just omit it entirely—HTML5 defaults script tags to text/javascript anyway:

<!-- Option 1: Correct the type attribute -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- Option 2: Omit type (cleaner, HTML5-compliant) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Full Fixed Code #

I've cleaned up your code with the fix plus a tiny tweak to remove an unwanted underscore in your table:

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 
<style> 
th{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; text-align: center; } 
td{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; text-align: center; } 
</style> 
</head> 
<body> 
<section> 
<h1>Json data to HTML table</h1> 
<table id="JsonTable" style="table-layout: auto; border: 2px solid black;"> 
<tr style="border: 1px solid red;"> 
<th>UserID</th> 
<th>ID</th> 
<th>Title</th> 
<th>Body</th> 
</tr> 
</table> 
<script> 
$(document).ready(function(){ 
$.getJSON("https://jsonplaceholder.typicode.com/posts",function(data){ 
var task=''; // Changed from '_' to avoid an extra underscore at the start of the table
$.each(data,function(key,value){ 
task +='<tr>'; 
task +='<td>'+ value.userId +'</td>'; 
task +='<td>'+ value.id +'</td>'; 
task +='<td>'+ value.title +'</td>'; 
task +='<td>'+ value.body +'</td>'; 
task +='</tr>'; 
}) 
$('#JsonTable').append(task); 
}) 
}) 
</script> 
</section> 
</body> 
</html>

Quick Extra Checks (If It Still Doesn't Work) #

• Make sure your internet connection can access the jQuery CDN link
• Double-check that the jQuery script loads before your custom script (you already have this right in your code, so this is just a general best practice)

That should get your JSON data rendering into the table perfectly!

内容的提问来源于stack exchange，提问作者Vrajesh Kotecha