Question

我是JS的新手，我想知道是否有一个JS库将html字段绑定到JS对象，如：

<div class="js_source">
    <input field="name" />
    <input field="surname" />
    <button type="button">Save</button>
</div>

在生成JSON后按保存

{"name": "some name", "surname": "some surname"}

并发送到服务器

我可以自己写这个，但我宁愿使用一些现成的和经过测试的解决方案：）

Answer 1

我认为您正在寻找的是Jquery模板。这是一个将您的HTML模板与JSON对象绑定的库。它是一个很好的图书馆，我在几个项目中使用它。请在=＆gt; https://github.com/BorisMoore/jquery-tmpl

查看

所以你的代码应该是

<script id="Information" type="text/x-jquery-tmpl">
<div class="js_source">
    <input field="${name}" />
    <input field="${surname}" />
    <button type="button">${buttonName}</button>
</div>
</script>

JSON与您发布的内容相同：

  var json =  {"name": "some name", "surname": "some surname"};

绑定两者的Javascript代码如下所示：

 jsonParsed = $.parseJSON(json);
  $("#Information").tmpl(jsonParsed).appendTo('#AnyDivYouWant');

Answer 2

为什么你需要一个额外的lib，当你可以在js

中这样做

$('form').submit(function () {
    var json = {};
    json["name"] = $("#name").val();
    json["surname"] = $("#surname").val();
    //usein json to send to server
});

我认为这是您的HTML

<input id="name" />
<input id="surname" />

更新

使用此功能，您可以创建自己喜欢的

function createFormJson (formId) { //form id as parameter
    var json = {};
    $("#"+ formId).each(function(){     
        var allIns = $(this).filter(':input'); //iterate to all input types
        allIns.each(function (i, j) {
            var id = $(j).prop('id');
            json[id] = $(this).val();
        });
    });
    return json;
}

Answer 3

我开始学习Backbonejs，结合stickit添加了这个功能，还有更多。

JS库将标签绑定到JSON字段

3 个答案:

更新