使用jQuery和php從表單字段加載模板

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); 

}); 

希望它有幫助。告訴我你是否對這種方法有更多疑問。