Javascript / PHP - 使用PHP从服务器检索数据并使用Javascript生成/重新排列它是否是个好主意？

Question

Premise

While developing a website, I came across a problem that had to do with putting together a webpage using Javascript and PHP. I decided to ask this question, because I didn't know what kind of terminology I should use to find an answer (if there is any, I doubt it).

Background - what I have

Little background may help you understand why I asked this question.

I'm working on a list of persons. Administrator will basically have a WYSIWYG (What You See Is What You Get) -editor, where he can type in information about each person. Note that all these persons with all their information are visible on the same webpage, you don't have a separate page for each person.

Each person is retrieved from a MySQL database in PHP and generated on the page. The amount of attributes (email, address, name, role, bank account, etc.) is somewhat significant.

By clicking a button Add a new person on the page one can add a new person to the person list (this functionality is implemented in Javascript using JQuery). Via AJAX one can save changes to persons without being redirected to a separate page.

Getting to the problem

Now, beneath the hood (that is, in the source code) lies the actual problem. I mentioned how the person list will be generated using PHP, which is fine. However, because I want to use Javascript to add a person to the list, I have to repeat much of the same code, although with slight variation, as in PHP. I utilize append-method JQuery provides to add a person to the person list. It looks like this:

$('#vsrk_henkiloLaatikko_nappulaUusiHenkilo').click(function(){
    $('#vsrk_henkiloLaatikot').append(
        "<div class='vsrk_henkiloLaatikko'>"+
            "<div class='vsrk_henkiloLaatikko_kuva'>"+
                "<img src='media/img/tuntematon.png' alt='Ei kuvaa'/>"+
            "</div>"+
            "<div class='vsrk_henkiloLaatikko_tiedot'>"+
                "<h2 class='vsrk_kenttaEditoitava' contenteditable='true'>Etunimi Sukunimi</h2>"+
                "<h3 class='vsrk_kenttaEditoitava' contenteditable='true'>Henkilön rooli</h3>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true'></p>"+
                "<div></div>"+
                "<p><b>Henkilötunnus:</b></p>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true' style='min-height:28px'></p>"+
                "<p><b>Osoite:</b></p>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true' style='min-height:28px'></p>"+
                "<p><b>Puhelinnumero:</b></p>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true' style='min-height:28px'></p>"+
                "<p><b>Sähköposti:</b></p>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true' style='min-height:28px'></p>"+
                "<p><b>Tilinumero:</b></p>"+
                "<p class='vsrk_kenttaEditoitava' contenteditable='true' style='min-height:28px'></p>"+
                "<p><b>Seurakunta:</b></p>"+
                "<select class='vsrk_henkiloLaatikko_valintaSeurakunta vsrk_yleinen_syoteNormaali' style='width:100%'>"+
                    <?php
                        foreach($GLOBALS["paikat"] as $paikka){
                            echo
"                               \"<option>" . $paikka . "</option>\"+
";
                        }
                    ?>
                "</select>"+
                "<div>"+
                    "<p>Käyttäjätunnus:</p>"+
                    "<input class='vsrk_yleinen_syoteNormaali' type='text' placeholder='Ei käyttäjätunnusta' style='width:100%'/>"+
                    "<p>Näkyvyys:</p>"+
                    "<select class='vsrk_yleinen_syoteNormaali vsrk_henkiloLaatikko_valintaNakyvyys' style='width:100%'>"+
                    "<option selected='selected'>Näkyvissä</option>"+
                    "<option>Piilotettu</option>"+
                    "</select>"+
                "</div>"+
                "<div>"+
                    "<input class='vsrk_yleinen_nappulaNormaali vsrk_yleinen_nappulaPurppura vsrk_henkiloLaatikko_nappulaPoistaHenkilo' style='margin:2px 0 2px 0; width:100%' type='button' value='Poista tämä henkilö' />"+
                    "<input class='vsrk_yleinen_nappulaNormaali vsrk_yleinen_nappulaPurppura vsrk_henkiloLaatikko_nappulaTallennaHenkilo' style='margin:2px 0 2px 0; width:100%' type='button' value='Tallenna henkilötiedot'/>"+
                "</div>"+
            "</div>"+
        "</div>"
    );
});

The problem is that now I have to maintain both Javascript and PHP to contain the same information. This kind of double work can be little irritating, especially if you have to use two different languages to do the job.

Thinking about a solution

Now, being somewhat lazy, but also "reasonable", I came to think of a solution: what if I could gather information from the database in PHP into some useful form, get that data using Javascript and then use Javascript on the client side to generate the actual person list using my append-method (or something to that effect). This would mean that once I edit this "append-method", I can not only generate the person list once the page is loading, but also add new persons to the list using the same method. No additional duplicates, and modifing types of information the persons contain would become easier.

Now, the ultimate question...

...is this a good idea? Also, what kind of storage form would you recommend so that Javascript can "rearrange" the data retrieved using PHP, if this happens to be a good idea?

Answer 1

The short answer is yes.

The long answer is that what you're talking about is essentially separating your view from your model. When you do this you don't need to use the same programming language to retrieve and organize data and to present it.

Typically speaking the "useful form" you are referring to in order to organize data and make it usable by Javascript is going to be either XML or JSon. Because JSon is based on Javascript, I tend to use that.

Beyond JQuery there are several Javascript frameworks which are in use such as AngularJS and Ember. These serve the same purposes but are designed specifically to be a front-end fluid programming language. Larger companies tend to gravitate to these languages and they tend to scale well.

Regardless of what you use to present your data, the key is that it must work for your project. JQuery or even vanilla Javascript can do simple jobs such as parsing JSon and when you separate your project layers you will be better able to take advantage of the right tool for the job rather than sticking with PHP for the whole time.