HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>$.getJSON() with data</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 560px; }
    label { display: block; margin-bottom: 6px; font-size: 14px; }
    input { padding: 8px; width: 80px; border: 1px solid #cbd5e1; border-radius: 6px; }
    button { margin-top: 10px; padding: 8px 14px; cursor: pointer; background: #7c3aed; color: #fff; border: none; border-radius: 6px; }
    .log { margin-top: 14px; padding: 12px; background: #f5f3ff; border-radius: 6px; font-size: 14px; }
    ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }
  </style>
</head>
<body>
  <label for="user-id">User ID:</label>
  <input type="number" id="user-id" value="1" min="1" max="10">
  <button type="button" id="search">Filter posts</button>
  <div class="log" id="result">Results appear here.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#search").on("click", function() {
      var userId = $("#user-id").val() || 1;
      $.getJSON("https://jsonplaceholder.typicode.com/posts", { userId: userId }, function(posts) {
        var titles = posts.slice(0, 3).map(function(p) { return p.title.substring(0, 40) + "…"; });
        $("#result").html("Found " + posts.length + " posts for user " + userId + "<ul><li>" + titles.join("</li><li>") + "</li></ul>");
      });
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.getJSON() — query data filter (Try It)