时间戳

首页 > 解决方案 > JavaScript 代码不在浏览器中执行

javascript - JavaScript 代码不在浏览器中执行

问题描述

我正在尝试从各种在线教程中学习编程，并创建了可以预测某些东西的烧瓶服务器。我也得到了带有 javascript 的前端，但它不会运行。我不知道为什么。我不知道JS。我很了解python，但仅此而已。

我不知道该怎么做。

这是html文件：

<!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文件：

var feature1;

$(document).ready(function(){
  // fetch all DOM elements for the input
  feature1_ = document.getElementById("feature1");
  ;

});

$(document).on('click','#submit',function(){
    alert('end')
    // on clicking submit fetch values from DOM elements and use them to make request to our flask API
    var feature1 = feature1_.value;


    if(feature1 == ""){
      // you may allow it as per your model needs
      // you may mark some fields with * (star) and make sure they aren't empty here
      alert("empty fields not allowed");
    }
    else{
      var requestURL = "http://127.0.0.1/predict?f1="+feature1;

      console.log(requestURL); // log the requestURL for troubleshooting
      $.getJSON(requestURL, function(data) {
        console.log(data); // log the data for troubleshooting
        prediction = data['json_key_for_the_prediction'];
      });
      // following lines consist of action that would be taken after the request has been read
      // for now i am just changing a <h2> tag's inner html using jquery
      // you may simple do: alert(prediction);
      alert(prediction)
      $(".result").html("Prediction is:" + prediction);

    }
  });

后端有烧瓶，js假设执行链接。我不知道为什么这不起作用你能帮我吗？

标签： javascripthtml

解决方案

好的，有几件事：

  1. 您的提交按钮缺少 ID
  2. 您的提交按钮导致重新加载
  3. 您的回调将在您收到响应之前运行

将您的 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);
});

推荐阅读