Javascript 发布前编辑AJAX调用URL

我想将文本框“postcode”中的数据添加到URL“VALUE1”和“VALUE2”中。我甚至不能给你任何例子，因为我甚至不知道从哪里开始

<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;
    }
  };
  xhttp.open("GET", "https://api.getaddress.io/v2/uk/VALUE1&VALUE2", true);
  xhttp.send();
}
</script>

获取邮政编码
无邮政编码
函数loadDoc（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
document.getElementById（“地址”）.innerHTML=xhttp.responseText；
}
};
xhttp.open（“GET”https://api.getaddress.io/v2/uk/VALUE1&VALUE2“，对）；
xhttp.send（）；
}

---

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

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

---

看起来您并没有使用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>

获取邮政编码
无邮政编码
函数loadDoc（）{
Value=document.getElementById（“邮政编码”）.Value
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
document.getElementById（“地址”）.innerHTML=xhttp.responseText；
}
};
xhttp.open（“GET”https://api.getaddress.io/v2/uk/“+Value+”&“+Value，true）；
xhttp.send（）；
}

尝试以下操作：

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

获取邮政编码
无邮政编码
函数loadDoc（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
document.getElementById（“地址”）.innerHTML=xhttp.responseText；
}
};
var postcode=encodeURIComponent（document.getElementsByName（“postcode”）[0]。值）；
xhttp.open（“GET”https://api.getaddress.io/v2/uk/“+邮政编码+”&“+邮政编码，正确）；
xhttp.send（）；
}

---

这将选择name属性设置为

“postcode”

的元素并获取其值。然后对URL字符串进行转义，并通过字符串连接将其添加到URL。

您可以增强代码以使用encodeURI。还建议在打电话之前为输入添加一些验证：看看这个小提琴-

获取邮政编码
无邮政编码
函数loadDoc（）{
var val=document.getElementById（“text-box1”）.value；
var val2=document.getElementById（“text-box2”）.value；
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
document.getElementById（“地址”）.innerHTML=xhttp.responseText；
}
};
var uri=encodeURI（“https://api.getaddress.io/v2/uk/“+val+”&“+val2）；
log（uri）；
open（“GET”，uri，true）；
xhttp.send（）；
}

您正在寻找字符串连接的奇迹。您还需要转义值。什么是

VALUE1

和

VALUE2

？它们都是

postcode

输入的值吗？问题没有标记到jQuery.JavaScript！=jQuery。OP甚至没有使用jQuery.Right。我意识到它没有标记到jQuery。将

“No Postcode”

作为错误值的请求是没有意义的。我改了。另外，添加了第二个值。好的……但是现在您正试图获取

的innerHTML，并将其分配给一个全局变量

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