test-url-params-2 / index.html
Omnibus's picture
Duplicate from Omnibus/test-url-params
0e6fde2
Raw
History Blame Contribute Delete
1.83 kB
<!DOCTYPE html>
<html>
<head>
<title>
How To Get URL Parameters using JavaScript?
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1 style="color:green;">
Omnibus
</h1> <b>
How To Get URL Parameters
With JavaScript?
</b>
<p> The url used is:
Current URL
</p>
<p>
Click on the button to get the url
parameters in the console.
<a href src="index2.html">go to index2</a>
</p>
<button onclick="getParameters()"> Get URL parameters </button>
<input type="text" id="input">
<button onclick="sendData()">Send Data</button>
<div id="output"></div>
<script>
function sendData() {
var value = document.getElementById('input').value;
$.ajax({
url: '/process',
type: 'POST',
data: { 'data': value },
success: function(response) {
document.getElementById('output').innerHTML = response;
},
error: function(error) {
console.log(error);
}
});
}
</script>
<script>
function getParameters() {
let urlString = window.location.href;
let paramString = urlString.split('?')[1];
let params_arr = paramString.split('&');
for(let i = 0; i < params_arr.length; i++) {
let pair = params_arr[i].split('=');
document.getElementById('output').innerHTML = "<p>" + "Key is:" + pair[0] + "<br>" + "Value is:" + pair[1]+"</p>";
console.log("Key is:" + pair[0]);
console.log("Value is:" + pair[1]);
}
}
getParameters()
</script>
</body>
</html>