Question

我正在尝试从各种在线教程中学习编程，并且我创建了预测某些内容的flask服务器。我也有使用javascript的前端，但是它无法运行。我不知道为什么。我不认识JS。我很了解python，但仅此而已。

我不知道这样做。

这是html文件：

 Stream<int> _test() async* {
    for(int i = 0; i < 50; i++){

      ///Heavy workload simulation
      for(int x = 0; x < 100000; x++){
        double _r = Random().nextDouble();
      }
      print(i);
      // Delay duration is arbitrarily chosen 
      await Future.delayed(Duration(milliseconds:10), () {
      });

      yield i;
    }
  }

这是JS文件：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="static/style.css">
    <script type="text/javascript", src="static/code.js"></script>

    <title>Heading</title>
  </head>
  <body>
    <br>
    <!--<a href="index.html"><img class="logo" src="static/final_v1.png" alt=""></a>-->
    <br>
    <div class="container main">
  <div class="jumbotron" id="holder">
    <h1 class='main_heading'> Some Machine learning model</h1>
    <h3>lorem ipsum dolor sit amet</h3>
    <br>
    <div class="instructions">
      <h2>Instructions: </h2>
      <p>1. lorem ipsum dolor sit amet</p>
      <p>2. Curabitur tincidunt orci non nunc sagittis euismod.</p>
    </div>
    <br>
    <br>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Feature1:</label>
        <div class="col-sm-10">
          <input  class="form-control" id="feature1" placeholder=" Enter feature1" >
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="button btn btn-default">Submit</button>
        </div>
      </div>
    </form>
    <h2 class="result"></h2>
  </div>
</div>

<!-- Footer -->
<footer class="page-footer font-small blue">

  <div class="footer-copyright text-center py-3">
    <div class="bottom">
      <p><a href="#">xyz | Status Prediction Demo</a></p>
    </div>
  </div>

</footer>
<!-- Footer -->


  </body>
</html>

后端有长颈瓶，而js则想执行链接。我不知道为什么这不起作用你能帮我吗？

Answer 1

好的，有几件事：

您的“提交”按钮缺少ID
您的“提交”按钮导致重新加载
您的回调将在得到响应之前运行

将HTML更改为：

<button id="submit" type="button" type="button" class="button btn btn-default">Submit</button>

type属性将删除重新加载，添加的ID将使您的脚本能够识别它。

这些代码行在得到响应之前就会运行：

alert(prediction)
$(".result").html("Prediction is:" + prediction);

将它们放入getJSON内：

$.getJSON(requestURL, function(data) {
  console.log(data); // log the data for troubleshooting
  var prediction = data['json_key_for_the_prediction']; // <-- added `var`
  alert(prediction);
  $(".result").html("Prediction is:" + prediction);
});

Answer 2

您显然是新手，所以我提供了一个严格/最小的测试用例文件供您使用。当页面加载时，此代码只会触发alert。

下载Notepad++，以便在运行Microsoft操作系统时不添加BOM（字节顺序标记）。
将以下代码另存为example.xhtml。
根据需要进行修改。

[Stackoverflow错误，在有序列表和代码之间必填]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Default Test Template</title>
<script defer="true" type="application/javascript">
//<![CDATA[
window.onload = function(event)
{
 alert('JavaScript is enabled');
}
//]]>
</script>
<style type="text/css">

body {background-color: #000; color: #fff;}
</style>
</head>

<body>

<h1>Default Test Template</h1>

</body>
</html>

JavaScript代码无法在浏览器中执行

2 个答案: