时间戳

首页 > 解决方案 > 从表单提交后的 XMLHttpRequest()

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>

标签： javascripthtml

解决方案

这就是您可以中断提交事件并做任何您想做的事情的方式。 

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

推荐阅读