[ANSWERED] Display ajax in html page

Question 1

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>

Question 2

<!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>

Question 3

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

Bollate

[ANSWERED] Display ajax in html page

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by Fahmi B.

Comment posted by megadarkfriend

Comment posted by Fahmi B.

Comment posted by megadarkfriend

Comment posted by megadarkfriend

Comment posted by megadarkfriend

Comment posted by Shiekh Abdul Mukeem

Comment posted by Shiekh Abdul Mukeem

By

Related Post

[ANSWERED] problem in selecting list item in html/css

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – Trying to align a div to the right using CSS

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate