在HTML页面中显示Ajax

I'm using flask as a backend, and one of my endpoints is objectList, which returns data in this format:

[{name1:value1, name2:value2}, {name1:value3, name2:value4}]

In order to display this data on my html page, I'm using the following code:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      $(document).ready(function){
        $.ajax({
          url: 'localhost:5000/objectList',
          method:"GET",
          success: function(result){
            $("#div1").html(result);
          };
        });
      };
    </script>
  </head>
  <body>

    <div id="div1"></div>
  </body>
</html>

This doesn't display any data. What am I doing wrong and how can I fix this?

Edit: just a clarification, I want the data to load when the page loads, not on a button or a click

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("demo_ajax_json.js", function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
});
</script>
</head>
<body>

<button>Get JSON data</button>

<div></div>

</body>
</html>

</div>

After our discussion, I find this code works properly

You have to close the parenthesis in the function ajax, and allow the access-control in the server side with this line

header("Access-Control-Allow-Origin: *");

// or replace the star with the server where you have the html

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $.ajax({
          url: 'localhost:5000/objectList',
          method:"GET",
          success: function(result){
            // to verifiy the result
            console.log(result);
            
            var htmlOutput = '';

            // the iteration of your result because you have many entries
            $.each(result, function(i, item) {
                htmlOutput += ''+
                '<ul>'+
                 '<li>name1: '+item['name1']+'</li>'+
                 '<li>name2: '+item['name2']+'</li>'+
                '</ul>';
            });
            $("#div1").html(htmlOutput);
          }, error: function(jqXHR, textStatus, error) {
            // to verifiy either there is an error or not
            console.error(textStatus);
          }
        });
      });
    </script>
  </head>
  <body>

    <div id="div1"></div>


  </body>
</html>

</div>