Question

我想在文本框中添加数据＆＃39;邮政编码＆＃39;进入网址＆＃39; VALUE1＆＃39;和＆＃39; VALUE2＆＃39;。我甚至无法向你展示任何例子，因为我甚至不知道从哪里开始。

checkCompile()

我如何

Answer 1

尝试以下方法：

<input type="text" name="postcode" placeholder="Postcode" ><br>
<button type="button" onclick="loadDoc()">Get Postcode</button>

<p id="Addresses">No Postcode</p>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("Addresses").innerHTML = xhttp.responseText;
    }
  };
  var postcode = encodeURIComponent(document.getElementsByName("postcode")[0].value);
  xhttp.open("GET", "https://api.getaddress.io/v2/uk/"+postcode+"&"+postcode, true);
  xhttp.send();
}
</script>

这将选择name属性设置为"postcode"的元素并获取其值。然后将其转义为URL字符串，并通过字符串连接添加到您的URL中。

Answer 2

您可以增强代码以使用encodeURI。还建议在拨打电话之前为输入添加一些验证：查看此小提琴 - https://jsfiddle.net/

<input id="text-box1" type="text" name="postcode" placeholder="Postcode" ><br>
<input id="text-box2" type="text" name="postcode" placeholder="Postcode 2" ><br>
<button type="button" onclick="loadDoc()">Get Postcode</button>

<p id="Addresses">No Postcode</p>

<script>
function loadDoc() {
 var val= document.getElementById("text-box1").value;
 var val2= document.getElementById("text-box2").value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("Addresses").innerHTML = xhttp.responseText;
    }
  };
  var uri = encodeURI("https://api.getaddress.io/v2/uk/"+val+"&"+val2);
  console.log(uri);
  xhttp.open("GET", uri, true);
  xhttp.send();
}
</script>

Answer 3

看起来你没有使用JQUERY，而是直接使用javascript。这是一个更新。

值得注意的是，您有一个字段，但有两个值。需要先做好准备。

<input type="text" id="postcode" name="postcode" placeholder="Postcode" ><br>
<button type="button" onclick="loadDoc()">Get Postcode</button>

<p id="Addresses">No Postcode</p>

<script>
function loadDoc() {

 Value = document.getElementById("postcode").value

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("Addresses").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "https://api.getaddress.io/v2/uk/"+Value+"&"+Value, true);
  xhttp.send();
}
</script>

Answer 4

下面的代码将为您提供邮政编码字段的值：

xhttp.open("GET", "https://api.getaddress.io/v2/uk/" + document.getElementById("postcode").value +"&" + document.getElementById("postcode").value, true);

在发布之前编辑AJAX调用URL

4 个答案: