在發佈之前編輯AJAX調用URL

我想將文本框「郵編」中的數據添加到URL「VALUE1」和「VALUE2」中。我甚至不能向你展示任何例子，因爲我甚至不知道從哪裏開始。在發佈之前編輯AJAX調用URL

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

我怎麼

來源

2016-07-13 Matt

你要找的字符串連接的奇觀。 – SLaks

您還需要轉義該值。 – SLaks

什麼是「VALUE1」和「VALUE2」？他們都是'郵政編碼'輸入的價值嗎？ –

您可以增強您的代碼以使用encodeURI。也有人爲添加一些驗證製作呼叫前輸入：只看該fiddle- 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>

來源

2016-07-13 17:09:46 Don

-3

下面的代碼會給你的郵編字段的值：

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

來源

2016-07-13 17:05:06 tovishalck

該問題未標記爲jQuery。 –

什麼是'$'??? .. – charlietfl

JavaScript！= jQuery。 OP甚至沒有使用jQuery。 – BadHorsie

-1

看來你不使用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>

來源

2016-07-13 17:05:52 arcee123

作爲值 – charlietfl

錯誤的「'無郵政編碼」'沒有意義的請求。我改變了它。另外，添加第二個值。 – arcee123

好的...但是現在你試圖獲得一個''的innerHTML，並將它分配給一個全局變量 – charlietfl

嘗試以下操作：

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

來源

2016-07-13 17:07:27

在發佈之前編輯AJAX調用URL

回答

相關問題