避免php和javascript之间的重复代码

我有一个PHP页面，其上有一个表单，用于将人员添加到一个小组。避免php和javascript之间的重复代码

对于每个被添加的人，都有一个包含多个表单元素的表单元素，每个表单元素都根据人员的编号进行命名。例如：

<div class="user"> 
<input type="text" name="user1LastName" /> 
... 
</div> 
<div class="user"> 
<input type="text" name="user2LastName" /> 
... 
</div>

对于数据库中的每个人，php页面都会填充一个表单部分。

要添加额外的人，用户可以点击一个“+”图标，此时页面使用jQuery动态填充一个新的。要做到这一点，我只是将新的div html附加到现有的表单。这意味着javascript页面包含所有相同的html标记（将被附加），就像php页面一样。

这似乎是不必要的代码重复。每当我改变PHP页面中的内容时，我也必须在JavaScript代码中进行更改。

是否有避免这种代码重复的一般方法？我能想到的唯一事情就是使用jQuery从现有的div中获取html。但在这种情况下，用户n的表单字段的值将出现在用户n + 1的新代码中。

谢谢。

来源

2011-04-03 user480029

js是客户端，它可以关闭，你不能依靠它，因为PHP是服务器端，它可以依靠。 – 2011-04-03 23:14:44

@Dagon - 我们决定使用这个应用程序在用户端需要javascript。当然，我仍然验证服务器端的所有输入等。 – user480029 2011-04-03 23:20:27

该PHP代码应该给JavaScript一个“原型”，它可以使用JavaScript修改。这样，即使没有任何用户，JavaScript仍然可以工作。这个例子显然缺少很多代码（如表单），但它应该给你一个想法。我还没有测试过，因为我认为你必须进行大量的修改。

<script type="application/x-javascript"> 
    addEventListener("load",function(){ 
    document.getElementById("add-user").addEventListener("click",function(){ 
    var node=document.getElementById("prototype-container").getElementsByClassName("users")[0].cloneNode(true),n=document.getElementById("add-user").getElementsByClassName("users").length,list=node.getElementsByTagName("input"); 
    document.getElementById("user-list").appendChild(node); 
    node.id="users_"+(n+1); 
    for(var i=0;i<list.length;++i) 
    list[i].name&&(list[i].name+="["+n+"]"); 
    },false); 
    },false); 
</script> 
</head> 
<body> 
<div id="prototype-container"> 
    <? /* print out a div without any information in it */ ?> 
</div> 
<div id="user-list"> 
    <? /* print out divs with some infomation in them */ ?> 
</div> 
<button id="add-user">add a user</button>

来源

2011-04-04 01:30:16 yingted

感谢您的建议。我曾经想过要做这样的事情，但我看到实现它的唯一方法就是在php中复制我的代码。在PHP中，我有一个循环，从db条目填充该用户div。然后，我需要将“空白”/未填充的div结构放在同一个php页面中。有没有一种简单的方法只需要在php中对div结构进行编码，然后将其填充到db循环中并从js中抓取它？对不起，如果这太笼统了。。。 – user480029 2011-04-04 21:09:00

我最终使用了这种方法的修改。我创建了一个函数来输出div内容，它使用了一个用于填充div的值的数组。我使用此功能回显所有div，包括一个“空白/模板”div。 div的html只写出一次 - 在函数中 - 然后js可以从空白div中取出。 – user480029 2011-04-09 02:29:34

Capisci :)？

<div class="user" id="user_1"> 
<input type="hidden" name="uid[0]" value="1"/> 
<input type="text" name="lastname[0]" value="user480029"/> 
... 
</div> 

<div class="user" id="user_2"> 
<input type="hidden" name="uid[1]" value="2"/> 
<input type="text" name="lastname[1]" value="arto"/> 
... 
</div>

增加另一场现在，当只是......

<div class="user" id="user_3943094103945"> 
<input type="hidden" name="uid[]" value=""/> 
<input type="text" name="lastname[]" value=""/> 
... 
</div>

然后迭代槽$_POST[]一个做你想做的。

你在.user上有用户标识，所以我删除了用户，你可以删除那部分HTML（这更适用于UX），更重要的是，你没有数百个变量，但只有几个数组可以在一个循环中迭代。希望你明白这一点。干杯。

来源

2011-04-03 23:17:34

Grazie webarto。 Capisco。使用数组是循环$ _POST值的更简洁的方式。现在我只是使用动态变量名来循环访问名称。 $ {“LastName”。$ i}等 – user480029 2011-04-04 00:03:32

但我现在主要试图避免的是，必须从我的php页面中重复所有的表单html，在javacript中。 PHP循环遍历所有现有记录，输出完成的表单字段。当用户想添加另一个人时，js插入相同的html。所以这个html写在两个地方 - php循环和js。我想避免这种重复。谢谢！ – user480029 2011-04-04 00:10:19

你在建立某种私人应用吗？你可以发布整个.class div，所以我可以给你更好的答案。我需要知道你在使用什么元素。 – 2011-04-04 00:16:54

避免php和javascript之间的重复代码

回答

相关问题