html & javascript输入按钮重定向到错误页面-否则复制文本到聊天(只有当输入被按下)

cidc1ykv  于 2023-01-29  发布在  Java
关注(0)|答案(1)|浏览(99)

每当我点击输入按钮时,页面似乎要么显示
由于请求的内容类型不是'application/json',因此未尝试加载JSON数据。
或者很少,如果按下回车键,它会创建每个聊天的副本,并将其添加到div中
我已经删除了输入的关键事件,但由于一些奇怪的原因,输入功能仍然工作,我推测这是由于 Bootstrap ,但我不太确定。

<!DOCTYPE html>
<html lang="en" style="height: 500px">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Lexend" rel="stylesheet" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/stylesheet.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://www.unpkg.com/spltjs@1.1.0"></script>
    <script src="https://releases.jquery.com/git/jquery-git.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.0.2/typeit.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-dark bg-dark">
      <!-- Navbar content -->
      <button type="button" class="btn btn-light" style="height:34px">click me</button>
      <p style="color:white; font-family: Lexend;font-size: 15px;font-weight: 400;text-align: center;">AI for a healthier you</p>
      <button type="button" class="btn btn-light" style="height:34px">click me</button>
    </nav>
    <br>
    <center>
      
        <div class="container" style="background-color:white ;  border-radius: 20px;height:80%;-webkit-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);-moz-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);">
          <p style="color:black" id="hello"></p>
          <form method="post">
            <div class="input-group mb-3">
              <input type="text" class="form-control" placeholder="Type here...." aria-label="Recipient's username" aria-describedby="basic-addon2" name="userid" id="textinput">
              <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" value="hello world" id="button">Submit</button>
          </form>
        </div>
        </div>
        </div>
      
    </center>
    <script>
      document.getElementById("button").addEventListener("click", insertText);
      // CREATES A DIV AND SENDS THE USERS TEXT
      function insertText() {
        let div = document.createElement("div");
        let usertext = document.getElementById('textinput').value;
        const usertext2 = 'Patient: ' + usertext;
        let text = document.createTextNode(usertext2);
        div.appendChild(text);
        document.getElementById("hello").appendChild(div);
        /////////////// submit JSON TO APP
        var json_entry = usertext
        fetch('/dashboard', {
          method: 'POST',
          body: JSON.stringify({
            user_text: json_entry
          }),
          headers: {
            'Content-Type': 'application/json'
          }
        });
        let apiData;
        fetch('/dashboard/api').then((response) => response.json()).then((data) => {
          apiData = data;
          let div = document.createElement('div');
          let robot_reply = document.createTextNode(apiData);
          div.appendChild(robot_reply);
          document.getElementById("hello").appendChild(div);
        });
        ////// ENTER BUTTON ////
        ///////////////////////
        /////////////////////// allows the ability to hit the enter button 
        var input = document.getElementById("textinput");
        
      }
    </script>
    </div>
    </div>
  </body>
</html>
h79rfbju

h79rfbju1#

当你点击enter时,它会触发<form>上的submit事件,这将导致页面刷新。这基本上是浏览器功能中的一个。在<form>标记内的字段中按下任何enter键都会导致表单提交。如果表单提交没有得到处理,它会尝试将表单POST到当前URL。
你需要把所有的东西都附加到<form>上的submit事件,而不是按钮点击,你还需要调用e.preventDefault来阻止浏览器默认的表单动作处理。
此外,您需要在按钮上使用type="submit",这样单击该按钮也会提交表单。
使用表单提交事件对于可访问性来说也是更好的,它意味着用户可以在一个字段中按回车键或单击按钮,它将被处理。

<!DOCTYPE html>
<html lang="en" style="height: 500px">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Lexend" rel="stylesheet" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/stylesheet.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://www.unpkg.com/spltjs@1.1.0"></script>
    <script src="https://releases.jquery.com/git/jquery-git.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.0.2/typeit.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-dark bg-dark">
      <!-- Navbar content -->
      <button type="button" class="btn btn-light" style="height:34px">click me</button>
      <p style="color:white; font-family: Lexend;font-size: 15px;font-weight: 400;text-align: center;">AI for a healthier you</p>
      <button type="button" class="btn btn-light" style="height:34px">click me</button>
    </nav>
    <br>
    <center>
      
        <div class="container" style="background-color:white ;  border-radius: 20px;height:80%;-webkit-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);-moz-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);">
          <p style="color:black" id="hello"></p>
          <form method="post" id="form">
            <div class="input-group mb-3">
              <input type="text" class="form-control" placeholder="Type here...." aria-label="Recipient's username" aria-describedby="basic-addon2" name="userid" id="textinput">
              <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="submit" value="hello world" id="button">Submit</button>
          </form>
        </div>
        </div>
        </div>
      
    </center>
    <script>
      document.getElementById("form").addEventListener("submit", insertText);
      // CREATES A DIV AND SENDS THE USERS TEXT
      function insertText(e) {
        e.preventDefault();
        let div = document.createElement("div");
        let usertext = document.getElementById('textinput').value;
        const usertext2 = 'Patient: ' + usertext;
        let text = document.createTextNode(usertext2);
        div.appendChild(text);
        document.getElementById("hello").appendChild(div);
        /////////////// submit JSON TO APP
        var json_entry = usertext
        fetch('/dashboard', {
          method: 'POST',
          body: JSON.stringify({
            user_text: json_entry
          }),
          headers: {
            'Content-Type': 'application/json'
          }
        });
        let apiData;
        fetch('/dashboard/api').then((response) => response.json()).then((data) => {
          apiData = data;
          let div = document.createElement('div');
          let robot_reply = document.createTextNode(apiData);
          div.appendChild(robot_reply);
          document.getElementById("hello").appendChild(div);
        });
        ////// ENTER BUTTON ////
        ///////////////////////
        /////////////////////// allows the ability to hit the enter button 
        var input = document.getElementById("textinput");
        
      }
    </script>
    </div>
    </div>
  </body>
</html>

相关问题