Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Hae Materiaali nimellä</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
<script>

function getByName(){
	var xmlhttp = new XMLHttpRequest();
	var url = "materialsbyname";


	xmlhttp.onreadystatechange = function() {
	    if (this.readyState == 4 && this.status == 200) {
	        var myArr = JSON.parse(this.responseText);
	        myFunction(myArr);
	    }
	};

	xmlhttp.open("GET", url, true);
	xmlhttp.send();

	function myFunction(arr) {

		var out = "Löydetyt materiaalit:<br>";
	    for(i = 0; i < arr.length; i++) {
	    	out += arr[i].name + "<br>";
	    }

	    document.getElementById("mater").innerHTML = out;
	}
}

</script>

<h3>Materiaalin Nimi:</h3>
<input type="text" id="matname"><br>
<input type="button" value="Search by name" onclick="getByName()">

<p>
<div id="mater"></div>

</body>
</html>