代码之家 › 专栏 › 技术社区 › Ninja Warrior 11

表单提交后的xmlHttprequest()

html javascript

Ninja Warrior 11 · 技术社区 · 7 年前

我是javascript新手,能用一下吗 XMLHttpRequest() 在我从表单命中提交之后,结果应该与OnCutt事件相同。我有一个名为 get 通过使用 xmlhttprequest() 我可以在div中添加一个新对象 sample ,如果它是一个按钮,它就会工作。唯一的区别是我想在div中添加新的对象 样品 不重定向到 http://127.0.0.1:5000/get?query=apple 在我提交表单之后,在本例中表单和函数get()应该一起工作。我也不想看到 http://127.0.0.1:5000/get?查询=苹果 在我提交表单后浏览器的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>

2 回复 | 直到 7 年前

Hikmat G. 7 年前

这就是你如何中断提交事件,并做任何你想做的事。

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

Parth Raval 7 年前

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调用函数

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

10 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

10 月前

Alex · 在轻量级中同时解构和不解构变量

10 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

10 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

11 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

11 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

11 月前

user3472810 · Angular@Output/EventEmitter返回undefined

11 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

11 月前