從表單提交后的XMLHttpRequest（）

Question

我是Java語言的新手，在從表單中單擊XMLHttpRequest()之后可以使用XMLHttpRequest() ，但是結果應該與onclick事件相同。 我有一個名為get的函數，通過使用XMLHttpRequest()可以在div sample添加一個新對象，如果它是一個按鈕，它將起作用。 唯一的不同是，我要提交新的對象到div sample而無需提交到http://127.0.0.1:5000/get?query=apple 。這個案例。 提交表單后，我也不想在瀏覽器的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>