Question

我是Java语言的新手，在从表单中单击“提交”后，我可以使用XMLHttpRequest()吗，但结果应该与onclick事件相同。我有一个名为get的函数，通过使用XMLHttpRequest()我可以在div sample内添加一个新对象，如果它是一个按钮，它将起作用。唯一的区别是，在提交表单后，我想将新对象添加到div sample而不重定向到http://127.0.0.1:5000/get?query=apple，在这种情况下，表单和函数get（）应该可以一起工作。提交表单后，我也不想在浏览器的url字段中看到http://127.0.0.1:5000/get?query=apple。我需要一些帮助，我努力使自己尽可能使用纯js，而不要依赖jquery。

<div id="sample"></div>

<div onclick="get('apple');">CLICK APPLE</div>

<form action="/get" method="GET">
    <input name="query">
    <input type="submit">
</form>

<script>
    function get(query) {
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("sample").innerHTML =
              this.responseText;
            }
          };
          xhttp.open("GET", "get?query=" + query, true);
          xhttp.send();
        };
</script>

Answer 1

function get(query) {
  console.log("Called Function");
  query = document.getElementById('query').value;
  console.log(query);
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("sample").innerHTML =
        this.responseText;
    }
  };
  xhttp.open("GET", "get?query=" + query, true);
  xhttp.send();
};

<div id="sample"></div>
<div onclick="get('apple');">CLICK APPLE</div>
<form id="myForm" action="/get" method="POST">
   <input type="text" name="query" id="query">
   <input type="button" onclick="get()" value="Submit form">
</form>

您具有用户表单类型method="GET"，该用户表单类型已更改为method="POST"，并添加了onclick="get()"以从javaScript调用函数

Answer 2

这是您可以中断提交事件并执行所需操作的方式。

<div id="sample"></div>

<div onclick="get('apple');">CLICK APPLE</div>

<form id="form">
    <input name="query">
    <input type="submit" value="Submit">
</form>

<script>
    document.querySelector('#form').addEventListener('submit', function(e){
        e.preventDefault();
        var query = e.target.elements['query'].value;
        get(query);
    });

    function get(query) {
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("sample").innerHTML =
              this.responseText;
            }
          };
          xhttp.open("GET", "get?query=" + query, true);
          xhttp.send();
        };
</script>

从表单提交

2 个答案: