Отображение ajax на странице html - PullRequest
Новая
       2

Отображение ajax на странице html

1 голос
/ 29 февраля 2020

Я использую flask в качестве бэкэнда, и одна из моих конечных точек - objectList, который возвращает данные в следующем формате: 

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

Для отображения этих данных на моей странице 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){
            $("#div1").html(result);
          };
        });
      };
    </script>
  </head>
  <body>

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

Данные не отображаются. Что я делаю не так и как я могу это исправить?

Редактировать: просто пояснение, я хочу, чтобы данные загружались при загрузке страницы, а не по кнопке или щелчку

Ответы [ 2 ]

1 голос
/ 29 февраля 2020

После нашего обсуждения я считаю, что этот код работает правильно

Вы должны закрыть круглые скобки в функции ajax и разрешить контроль доступа на стороне сервера с этой строкой

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

// или замените звезду на сервере, где у вас есть 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>
0 голосов
/ 29 февраля 2020 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...