1

I have a javascript that, with Ajax, gets an array from PHP and adds this data to a dropdown. Its all working.

It seems to me using Ajax for this is overkill, is there a more simple way?

javascript:

function ajaxGetCountries(){

var ajaxRequest;  

    try { // Opera 8.0+, Firefox, Safari    
        ajaxRequest = new XMLHttpRequest();

//etc etc
    }

 ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){

        allcountries = JSON.parse(ajaxRequest.responseText);

        var lst = document.getElementById('countrylst');
        for(var i = 0 ; i < allcountries.length ; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = allcountries[i];
            opt.value = allcountries [i];
            lst.appendChild(opt);
        }       
    }
 }

ajaxRequest.open("GET", "get_countries.php" , true);
ajaxRequest.send(null); 

}

Thanks.

Mick dK
  • 657
  • 8
  • 14
  • I should add, while trying to keep html, js and php seperated – Mick dK Apr 12 '15 at 03:51
  • 1
    php can actually template the values directly into your html code while serving the page. in fact, that was how a lot of people used to use it before we found better patterns. – dandavis Apr 12 '15 at 03:54
  • @user4098326 I'm aware this question has been answered many many times before, but it seems to me that most answers bring too many details to the table, which can be confusing for beginners. Thus I've decided to post a simpler alternative with some pictures to illustrate the problem. I hope that the question wont be closed then :-) –  Apr 12 '15 at 07:15

1 Answers1

2

This question has no relation with the separation of languages. You can put everything into the same file, or keep everything separated, problem and solutions remain the same. Actually your question can be summarized like this: How to share informations between a PC (javascript) and a web server (php)?

Briefly, as opposed to the solution you brought, without Ajax you'll have to reload the web page entirely and build the new dropdown list using php. In other words, while there must be other options, you have typically two solutions:

  • "traditional": ask the server for a new page, build the dropdown list server side (php), send back the new page to the PC.
  • "modern": ask the server for new data (js to php), send back the new data to the PC (php to js), build the dropdown list PC side (js).

Saying that the "modern" solution is too complex is wrong, with a little practice you'll find it as easy as the "traditional" one. Even more, you'll discover that it makes your program easier to manage and scale. Be careful though, it's not always the right option.

As mentionned in other answers, you can also print the data set server side into the web page during the "traditionnal" process. This solution seems closer to your needs and is more flexible than building html using php.

Since discussing about pros and cons of each technology is a wide subject, if you want details about that I suggest you to query Google :-| That's said you may at least find some clarifications about all this mess here :-)


Just in case the link breaks (click to zoom)...

"Traditional" way:

"Modern" way: