Hoe laad je een url vanuit PHP in javascript?

Status
Niet open voor verdere reacties.
T

Tijger81

Gebruiker
Lid geworden
2 jan 2010
Berichten
397
Hallo,
Ik werk met openlayers en ik probeer een xml bestand te laden vanaf een site. Dit bestand wil ik inlezen (Tagnames eruit halen) en deze Tagnames plaatsen in mijn option value. Dat lukt eigenlijk ook gewoon als ik de functie LoadXMLDocWms () aanroep,maar dan moet op de plek van xmlhttp.open("GET", "test.php$res?", true); in plaats van test.php$res een url staan: https://geodata.nationaalgeoregister.nl/ahn2/wms?request=GetCapabilities&service=WMS&version=1.1.1&.

Maar ik wil dat de link opgehaald wordt uit test.php, zodat ik Access-Control-Allow-Origin: * kan meesturen in geval van Cross domain gedoe. Maar hoe kan ik de url ophalen vanuit PHP naar javascript?
Daar kom ik dus niet uit.

Dit is wat ik nu heb:


Javascript:
Code: 
	//Vul wms keuze menu			
		function loadXMLDocWms() {			
		  var xmlhttp = new XMLHttpRequest();
		  xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			  myFunction(xmlhttp);
			}
		  };
		  xmlhttp.open("GET", "test.php?$res", true);
		  xmlhttp.send();
		}
		
		function myFunction(xml) {
		  var x, i, xmlDoc, txt;
			  xmlDoc = xml.responseXML;
			    txt = "";
			  x = xmlDoc.getElementsByTagName("Title");
			  for (i = 1; i< x.length; i++) {
				txt += '<option>'
				txt += x[i].childNodes[0].nodeValue + "</option>";
			  }
			  document.getElementById("layer").innerHTML = txt;

test.php:
Code: 
<?php header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, POST'); 
$url= "https://geodata.nationaalgeoregister.nl/ahn2/wms?request=GetCapabilities&service=WMS&version=1.1.1&"; 
$res = file_get_contents($url);
echo $res;
 ?>

index.html:
Code: 
<select name="laag" id="layer">
		<option value=""></option>
          </select>
 
Als ik 't goed begrijp heb je data in PHP die je wilt gebruiken in je Javascript?
In dat geval zou ik zoiets als dit doen:

PHP: 
$url= "https://geodata.nationaalgeoregister.nl/ahn2/wms?request=GetCapabilities&service=WMS&version=1.1.1&"; 
$res = file_get_contents($url);
echo '<script>var mijnVar = '.$url.';</script>;

Vervolgens kun je vanuit je Javascript die data gebruiken.
 
Zeer bedankt voor je antwoord!
Moet ik dan in JavaScript dit laten staan:
Code: 
xmlhttp.open("GET", "test.php?, true);
Of moet op de plek van test.php? dan Mijnvar komen?
 
Laatst bewerkt:
Ik heb zelf geen ervaring met xml uitlezen in Javascript maar met een beetje proberen kom je er zelf snel genoeg achter.
Kijk eens wat in mijnVar zit bijv.
 
Bedankt voor je antwoord, maar ik ga het anders doen: http://htmlpreview.github.io/?https...uery-cross-domain-requests/master/index2.html
Eerst gebruik ik dit om voorbij Domain Cross te komen en dan gebruik ik onderstaande methode om de tags <li> eruit te filteren:,,,maarrr hoe krijg ik alle <li> tags in de demo ID??? Ik krijg er steeds maar 1.
Code: 
<!DOCTYPE html>
<html>
<body>

<p>An unordered list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<p>Click the button to display the innerHTML of the UL element (index 3).</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementsByTagName("*");
    document.getElementById("demo").innerHTML = x[3].innerHTML;
}
</script>

</body>
</html>

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementsbytagname_all
 
Ik snap ook niet hoe dat zou moeten werken met jouw code?
Je haalt alle elementen op i.p.v. de li, die je wilt als ik het goed begrijp.

Dan is dit voldoende toch?
Code: 
function myFunction() {
    var list_items = document.getElementsByTagName("li");
  	for (var i = 0; i < list_items.length; i++) {
    	document.getElementById("demo").innerHTML+= list_items[i].innerHTML+'<br>';
    }
}
 
Heel erg bedankt. Zelf had ik ook een code gevonden:
Code: 
<script>var pcol = document.getElementsByTagName("li");</script>

<script>
for (var i=0;i<pcol.length;i++)
{ 
document.write(pcol.item(i).textContent);
document.write("<br>");
}

Het was de bedoeling om al de elementen die een LI tag hadden zouden worden gepakt. Coffee , Tea en Milk.

Nu wilde ik deze methode toepassen hierop:
Ik heb dit pakket gedownoad:
https://github.com/IonicaBizau/jQuery-cross-domain-requests

HIervan gebruik ik index2.html. Als ik deze open in de browser kan ik een URL opgegeven: https://geodata.nationaalgeoregister.nl/ahn2/wms?request=GetCapabilities&service=WMS&version=1.1.1&
Dan krijg ik een lijst met allemaal tags. Hiervan wil ik graag de <name> tags hebben, maar dan werkt deze code niet:

Code: 
<script>var pcol = document.getElementsByTagName("li");</script>

<script>
for (var i=0;i<pcol.length;i++)
{ 
document.write(pcol.item(i).textContent);
document.write("<br>");
}

Kun jij mij misschien helpen?

Helemaal mooi zou zijn als de tags als options in:
<select name="laag" id="layer">
<option value=""></option>
</select>

komen...
 
Laatst bewerkt:
Ik ben wat dingen aan het testen, zie hieronder, maar het lukt nog nietttt.
Ik probeer dus option value te vullen met de inhoud van de tagname <name>.

Met de code hierboven kwam ik helemaal niet verder.



Code: 
<button onclick="myFunction()">Try it</button>

<name>a</name>
<name>b</name>

<select name="laag" id="layer">
	<option value=""></option>
</select>	

<script>
function myFunction() {
var x, i, txt;
txt = "";
    var x = document.getElementsByTagName("name");
	for (i = 1; i< x.length; i++) {
	txt += '<option>'
	txt += x[i].childNodes[0] + "</option>";
	 }  
    document.getElementById("layer").innerHTML = txt;
}
</script>
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan