Kjapp og trygg hosting for Wordpress

Sende php til javascript fil

kongen

kongemedlem
For å rydde opp i koden så vil jeg plassere alt av javascript i egne filer. I den orginle filen så er det denne koden.

PHP:
<p id="land"></p>

// php
$land = 'Norge';

// javascript
var land = '<?php echo $land ?>';
document.getElementById("land").innerHTML = land;

Jeg vil flytte denne delen av koden

PHP:
var land = '<?php echo $land ?>';
document.getElementById("land").innerHTML = land;

til en fil som heter land.js i mappen "filer" og hente den inn til hovedfilen med

PHP:
<script type="text/javascript" src="filer/land.js">

men hvordan får jeg sendt $land (Norge) til variablen i .js filen?
 
Sist redigert:

BlitZz

Member
Hvorfor blande php og javascript når du kan gjøre alt i en av de?

Du kan gjøre dette i javascript:
Kode:
var land = 'Norge';
document.getElementById("land").innerHTML = land;

Du kan jo også bruke jquery global var:
Kode:
$land= "Norge";
//...

Og deretter hente den globale variabelen i den andre js filen og poste det i htmlen din slik:
Kode:
$( "#land" ).text( $land );

Eller misforstår jeg deg?:confused:
 
Sist redigert:

kongen

kongemedlem
$land får verdien sin fra ekstern fil med php file_get_contents. Bruker ikke jquery, men 'ren' javascript.
 

BlitZz

Member
Ok, etter litt googling fant jeg ut at den beste måten for å hente en php variabel til javascript er med ajax. Det eneste som suger litt er at det er litt delay.

Her er koden jeg skrapet sammen fra stackoverflow:

Index.html:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="ajax.js"></script>
</head>

<body>
    <h1>land</h1>
    <p id="land1"></p>
    <p id="land2"></p>
</body>

</html>

Ajax.js:
Kode:
function loadXMLDoc() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function(data) {
        if (xmlhttp.readyState == 4 ) {
           if(xmlhttp.status == 200){
              
               var data = JSON.parse(xmlhttp.responseText);
               document.getElementById("land1").innerHTML = data.land1;
               document.getElementById("land2").innerHTML = data.land2;
           }
           else if(xmlhttp.status == 400) {
              alert('There was an error 400')
           }
           else {
               alert('something else other than 200 was returned')
           }
        }
    }

    xmlhttp.open("GET", "land.php", true);
    xmlhttp.send();
}

loadXMLDoc();

Land.php:
PHP:
<?php
$land = array(
    'land1' => 'Norge',
    'land2' => 'Danmark',
);

echo json_encode($land);
?>

Håper dette fungerer!
 
Sist redigert:

adeneo

Medlem
Dersom du bare trenger $land når siden først laster, så er det to måter å gjøre det på.

Du kan enten sette opp PHP parseren til å også parse .js filer, men det er ingen god løsning ettersom caching av javascript filene ikke blir mulig, eller du kan bare legge $land i hovedfilen din som parses av PHP og hente den med javascript.
PHP:
<script type="text/javascript">
    var land = "<?php echo $land ?>";
</script>
<script type="text/javascript" src="filer/land.js">

variabelen land vil være tilgjengelig i land.js ettersom den er i et høyere scope, i dette tilfellet vil den være global.
Det finnes forøvrig ingenting som heter "jquery global var", dollartegnet betyr ingenting spesielt i javascript, men uten "var" foran vil en variabel automatisk være global, uansett om den har et dollartegn eller ikke.

Du kan selvfølgelig bruke ajax i stedet for file_get_contents til å hente innholdet i lokale filer, eller til å hente $land etter at siden først har lastet osv.
 
Sist redigert:

kongen

kongemedlem
Takk :)

adeneo sin versjon fungerer perfekt. Scope var et nytt ord. Lærer noe hver dag.

Er ajax egentlig veldig tregt? Jeg prøvde å sende noe med ajax og det tar lang tid før siden får svar tilbake.
 

BlitZz

Member
Misforsto deg litt da. Trodde du ikke ville ha inline code... Da fungerer jo selvfølgelig adeneo sin mye bedre! :)

Nei, ajax er ikke så tregt. Det kan være flere årsaker til at det går tregt. Men selvfølgelig, du sender jo forespørsler så om du for eksempel har en treg server vil det jo være en del forsinkelser. ;)
 
Sist redigert:
Topp