在html页面中显示ajax答案

【问题标题】：Display ajax in html page在html页面中显示ajax
【发布时间】：2020-02-29 10:44:01
【问题描述】：

我使用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>

这不显示任何数据。我做错了什么，我该如何解决？

编辑：只是澄清一下，我希望数据在页面加载时加载，而不是在按钮或点击时加载

【问题讨论】：

当你输入这个 url localhost:5000/objectList 的输出是什么？如果你执行 console.log("result") ，你会得到什么？
输入网址时的输出是所需格式的数据。 console.log("result") 只是说意外的语法“)”，所以我在某处有一个不平衡的括号吗？
点击检查 DOM 中的任意元素并右键单击，然后从可以看到 console.log() 输出的选项卡中选择“控制台”
console.log("result") 只是说出了意外的语法“)”，所以我在某处有一个不平衡的括号吗？
是的，我已经复制粘贴了代码。这是测试的确切错误：5 Uncaught SyntaxError: Unexpected token ')'

标签： html ajax flask

【解决方案1】：

经过我们的讨论，我发现这段代码可以正常工作

你必须关闭函数 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>

【讨论】：

【解决方案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>

【讨论】：

我不希望它在按钮点击时，我希望它与页面一起加载
自动加载。然后去你喜欢的数据库。
意思是你说在你的数据库中获取数据