Javascript 从表单提交后的XMLHttpRequest（）

我是Javascript新手，我可以在点击表单提交后使用

XMLHttpRequest（）

，但结果应该与onclick事件相同。我有一个名为

get

的函数，通过使用

XMLHttpRequest（）

我可以在div

sample

中添加一个新对象，如果它是一个按钮，它就可以工作。唯一的区别是我想向div

sample

添加新对象，而不重定向到

http://127.0.0.1:5000/get?query=apple

在我提交表单后，表单和函数get（）在本例中应该一起工作。而且我也不想看到

http://127.0.0.1:5000/get?query=apple

提交表单后，在浏览器的url字段中。我需要一些帮助，我强迫自己尽可能使用纯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>

点击苹果
函数get（查询）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“示例”）.innerHTML=
这个.responseText；
}
};
xhttp.open（“GET”，“GET？query=“+query，true”）；
xhttp.send（）；
};

函数获取（查询）{
log（“调用函数”）；
query=document.getElementById（'query'）。值；
console.log（查询）；
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“示例”）.innerHTML=
这个.responseText；
}
};
xhttp.open（“GET”，“GET？query=“+query，true”）；
xhttp.send（）；
};

点击苹果

函数获取（查询）{
log（“调用函数”）；
query=document.getElementById（'query'）。值；
console.log（查询）；
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“示例”）.innerHTML=
这个.responseText；
}
};
xhttp.open（“GET”，“GET？query=“+query，true”）；
xhttp.send（）；
};

点击苹果
这就是中断提交事件并执行任何操作的方法

<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>


点击苹果
document.querySelector（“#form”）.addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
var query=e.target.elements['query'].value；
获取（查询）；
});
函数get（查询）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“示例”）.innerHTML=
这个.responseText；
}
};
xhttp.open（“GET”，“GET？query=“+query，true”）；
xhttp.send（）；
};
这就是中断提交事件并执行任何操作的方法

<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>


点击苹果
document.querySelector（“#form”）.addEventListener（'submit'，函数（e）{
e、 预防默认值（）；
var query=e.target.elements['query'].value；
获取（查询）；
});
函数get（查询）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
document.getElementById（“示例”）.innerHTML=
这个.responseText；
}
};
xhttp.open（“GET”，“GET？query=“+query，true”）；
xhttp.send（）；
};
只有当
onclick=“get（）”
中有一个预定义的对象，比如
onclick=“get（'banana'）”
时，您的答案才有效。但是我如何在get函数中附加
name=“query”
的值呢？@NinjaWarrior11 answer-updated-bro您需要使用
document.getElementById（'query'））.value
获取输入值。@NinjaWarrior11 Welome Bro:-）只有当
onclick=“get（）”
中有一个预定义的对象，如
onclick=“get（'banana'）”
时，您的答案才有效。但是我如何附加
name=“query”的值呢
在get函数中？@NinjaWarrior11 answer updated bro您需要使用
document.getElementById（'query'）.value
来获取输入值。@NinjaWarrior11 Welome bro:-）这实际上是可行的，但结果是
/get？query=[object%20HTMLInputElement]
而不是
/get？query=STRING\u FROM\u query\u value
。如何将该对象转换为字符串？编辑它，现在检查。这实际上是可行的，但结果是
/get？query=[object%20HTMLInputElement]
，而不是
/get？query=string\u FROM\u query\u VALUE
。如何将该对象转换为字符串？编辑它，现在检查。