Javascript/PHP—使用PHP从服务器检索数据并使用Javascript生成/重新排列数据是一个好主意吗？ 前提

在开发一个网站时，我遇到了一个问题，这个问题与使用Javascript和PHP组合一个网页有关。我决定问这个问题，因为我不知道应该用什么术语来找到答案（如果有，我怀疑）

背景-我所拥有的 一点背景知识可以帮助你理解我为什么问这个问题

我正在写一份名单。管理员基本上有一个WYSIWYG（所见即所得）编辑器，他可以在其中输入每个人的信息。请注意，所有这些人及其所有信息都显示在同一网页上，您没有为每个人单独设置页面

每个人都从PHP中的MySQL数据库中检索并在页面上生成。属性的数量（电子邮件、地址、姓名、角色、银行帐户等）有些重要

通过单击页面上的按钮添加一个新的人员，可以将一个新的人员添加到人员列表中（此功能在Javascript中使用JQuery实现）。通过AJAX，用户可以将更改保存到个人，而无需重定向到单独的页面

着手解决问题 现在，真正的问题就隐藏在幕后（即源代码中）。我提到了如何使用PHP生成人员列表，这很好。然而，因为我想使用Javascript将一个人添加到列表中，所以我必须重复大部分相同的代码，尽管略有变化，就像在PHP中一样。我利用JQuery提供的append方法将一个人添加到个人列表中。看起来是这样的：

$('#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>\"+\n";
                        }
                    ?>
                "</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>"
    );
});

$（'vsrk_henkillaatikko_nappulaUusiHenkilo'）。单击（函数（）{
$（'vsrk_henkillaatikot'）。追加(
""+
""+
""+
""+
""+
“Etunimi Sukunimi”+
“亨基隆·鲁利”+
“
”+
""+
“Henkilötunnus:
”+
“
”+
“Osoite:
”+
“
”+
“Puhelinnumero:
”+
“
”+
“Sähköposti:
”+
“
”+
“Tilinumero:
”+
“
”+
“Seurakunta:
”+
""+
""+
""+
“Käyttäjätunnus:
”+
""+
“Näkyvyys:
”+
""+
“Näkyvissä”+
“Piilotettu”+
""+
""+
""+
""+
""+
""+
""+
""
);
});

问题是，现在我必须维护Javascript和PHP以包含相同的信息。这种双重工作可能有点烦人，尤其是当你必须使用两种不同的语言来完成工作时

思考解决方案 现在，由于有点懒惰，但也“合理”，我想到了一个解决方案：如果我可以用PHP从数据库中收集信息，以某种有用的形式，使用Javascript获取数据，然后在客户端使用Javascript，使用我的append方法（或类似方法）生成实际的人员列表，该怎么办。这意味着，一旦我编辑了这个“append方法”，我不仅可以在页面加载时生成人员列表，还可以使用相同的方法将新人员添加到列表中。没有额外的副本，修改人员包含的信息类型将变得更容易

现在，最终的问题是。。。

---

…这是个好主意吗？另外，如果这恰好是一个好主意，您会推荐什么样的存储形式，以便Javascript可以“重新安排”使用PHP检索的数据？

简短的回答是肯定的

长话短说的答案是，你所说的本质上是将你的视图从你的模型中分离出来。当您这样做的时候，您不需要使用相同的编程语言来检索、组织数据和呈现数据

通常来说，为了组织数据并使其可被Javascript使用，您所指的“有用形式”是XML或JSon。因为JSon是基于Javascript的，所以我倾向于使用它

除了JQuery之外，还有一些Javascript框架正在使用，比如AngularJS和Ember。它们的用途相同，但专门设计为前端流体编程语言。较大的公司倾向于使用这些语言，而且它们的规模也比较大

---

无论您使用什么来表示数据，关键是它必须适用于您的项目。JQuery甚至是vanilla Javascript都可以做一些简单的工作，比如解析JSon，当您分离项目层时，您将能够更好地利用正确的工具来完成这项工作，而不是一直使用PHP。

简单的答案是肯定的

长话短说的答案是，你所说的本质上是将你的视图从你的模型中分离出来。当您这样做的时候，您不需要使用相同的编程语言来检索、组织数据和呈现数据

通常来说，为了组织数据并使其可被Javascript使用，您所指的“有用形式”是XML或JSon。因为JSon是基于Javascript的，所以我倾向于使用它

超越jqueryt