Question

我正在尝试创建一个生成html模板的表单。我在页面上的隐藏div中有模板，并使用jQuery创建一个带有模板html的新窗口，但我无法弄清楚如何将表单字段的内容加载到模板中。我知道我应该使用AJAX，但我不知道从哪里开始。

Answer 1

假设您有此模板：

<div class="template">
    <p class="blah"></p>
    <p class="foo"></p>
</div>

以及此表格：

<form>
    <input name="blah" class="blah"/>
    <input name="foo" class="foo"/>
</form>

所以，对于这个例子，我们将假设通过每个相应元素的公共类将表单元素映射到模板元素：

$("form input").each(function() {
    $(".template").find("." + $(this).attr("class")).html(this.value);
});

在此处试试：http://jsfiddle.net/dx2E6/

Answer 2

我一直在使用的一个技巧是使用<script type="text/html">标记。浏览器不呈现代码，所以我做的是这样的：

<script type="text/html" id="template">
<div>
  <div class="some_field">{name}</div>
  <h4>{heading}</h4>
  <p>{text}</p>
</div>
</script>

你的表格是这样的：

<form>
  <input type="text" name="name" />
  <input type="text" name="heading" />
  <input type="text" name="text" />
</form>

然后你的javascript代码就像：

$(document).ready(function(){

  var tpl = $('#template').html();

  $('form input').each(function(){
    tpl.replace('{'+$(this).attr('name')+'}',$(this).val());
  });

  $('div.some_destination').html(tpl);

});

希望它有所帮助。如果您对此方法有更多疑问，请告诉我。

使用jQuery＆amp; amp;从表单字段加载带有变量的模板PHP

2 个答案: