javascript - Javascript - 将输入中的值动态添加到 GET url

Question

我有 3 个简单的输入文件

我需要动态地将输入值添加到GET请求中，为此我只需要使用vanilla js。

我的 HTML

<div class="action-container">
    <div class="action">
        <input class="input" id="player1" type="text">
        <div class="button" onclick="submit()">Submit</div>        
    </div>
    <div class="action">
        <input class="input" id="player2" type="text">
        <div class="button" onclick="submit()">Submit</div>
    </div>
    <div class="action">
        <input class="input" id="player3" type="text">
        <div class="button" onclick="submit()">Submit</div>
    </div>
</div>

我的JS

function submit(){
    var http = new XMLHttpRequest();

    var guessPlayer1 = document.getElementById('player1').value
    var guessPlayer2 = document.getElementById('player2').value
    var guessPlayer3 = document.getElementById('player3').value

    http.onreadystatechange = function(){
        if(http.readyState == 4 && http.status == 200){
            console.log(http.response)
        }
    }

    http.open("GET", "https://Dummy-End-Point.com/" + guessPlayer1, true);
    http.send();

}

标签： javascriptxmlhttprequest

Answer 1

更改submit()以将 ID 作为参数。

function submit(id) {
  var http = new XMLHttpRequest();

  var guess = document.getElementById(id).value

  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      console.log(http.response)
    }
  }

  http.open("GET", "https://Dummy-End-Point.com/" + guess, true);
  http.send();

}

<div class="action-container">
  <div class="action">
    <input class="input" id="player1" type="text">
    <div class="button" onclick="submit('player1')">Submit</div>
  </div>
  <div class="action">
    <input class="input" id="player2" type="text">
    <div class="button" onclick="submit('player2')">Submit</div>
  </div>
  <div class="action">
    <input class="input" id="player3" type="text">
    <div class="button" onclick="submit('player3')">Submit</div>
  </div>
</div>