与JSON响应一起使用HTML Templete的更好方法

Question

我正在从服务器中获得JSON响应。我正在获取诸如学校（名称，ID），主要主题（名称，ID），启动，结束等的用户详细信息

我想证明这是一个表单中的适当文本字段，用户可以在其中编辑此字段，并且在编辑后，用户应再次提交给服务器。我正在用jQuery内的HTML代码来借助提取的JSON代码。我发现在jQuery内部管理HTML非常困难是否有更好的方法来以下代码。

$(document).on('click', '.edit-edu', function(event) {
  event.preventDefault();
  var id = $(this).parents('.row').attr('id');
  var id1 = id.split('-');
  $.post("SingleEdu", {id: id1[1]}, function(data) {
    console.log(data);
    $.each(data.educationList, function(key, value) {
      $('#' + id).replaceWith('<div id="addNewEdu" class="addorEdit">'
      + '<legend>Edit education details</legend>'
      + '<form action="UpdateEducation" id="UpdateEducation" cssClass="form-horizontal">'
      + '<div class="form-group">'
      + '<div class="col-md-2">'
      + '<label>School/College</label>'
      + '</div>'
      + '<div class="col-md-6">'
      + ' <textfield name="ed.pageBySchoolPid.name" value="' + value.pageBySchoolPid.name + '" id="school2" label="School/College" placeholder="College or School Name" cssClass="form-control">'                                        + '</textfield>'
      + '<input type="hidden" name="ed.pageBySchoolPid.id" value="' + value.pageBySchoolPid.id + '" id="schoolId2" label="School/College" cssClass="form-control">'
      + '</hidden>'
      + '</div>'
      + '</div>'
      + '<div class="form-group">'
      + '<div class="col-md-2">'
      + '<label>Major</label>'
      + '</div>'
      + '<div class="col-md-6">'
      + '<input type="text" name="ed.pageByMajorPid.name" value="' + value.pageByMajorPid.name + '" id="major1" label="Class" placeholder="Major Subject" cssClass="form-control">'
      + '<input type="hidden" name="ed.pageByMajorPid.id" value="' + value.pageByMajorPid.id + '" id="majorId1" label="Class" cssClass="form-control">'
      + '</div>'
      + '</div>'
      + '<div class="form-group">'
      + '<div class="col-md-2">'
      + '<label>Start</label>'
      + '</div>'
      + '<div class="col-md-6">'
      + '<input type="text"  name="ed.start"  value="' + value.start + '" id="sstart1" label="From" placeholder="eg. Start: July 2007" cssClass="form-control">'
      + '</div>'
      + '</div>'
      + '<div class="form-group">'
      + '<div class="col-md-2">'
      + '<label>End</label>'
      + '</div>'
      + '<div class="col-md-6">'
      + '<input type="text" name="ed.end" value="' + value.end + '" id="send1" label="To"  placeholder="eg. End : May 2011 or Till" cssClass="form-control">'
      + '</div>'
      + '</div>'
      + '<div class="form-group">'
      + '<div class="col-md-2">'
      + '<label>Visibility</label>'
      + ' </div>'
      + '<div class="col-md-6">'
      + '<select label="Visibility" name="ed.visibility"  value="' + value.visibility + '" id="svisibility1" value="public" cssClass="form-control">'
      + '<option>Public</option>'
      + '<option>Friends</option>'
      + '<option>Me</option>'
      + '</select>'
      + '</div>'
      + '</div>'
      + '<div class="form-group">'
      + '<div class="col-md-2">'
      + '<label class="sr-only">Submit</label>'
      + '</div>'
      + '<div class="col-md-6">'
      + '<input type="submit" value="add" id="submit_education" cssClass="btn btn-sm btn-success"/>'
      + '</div>'
      + '</div>'
      + '</form>')
    });
   });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></script>

 <div class="row" id="edu-56">
   <div>Specialization</div>
    <div>School</div>
    <div>start &nbsp; end</div>
   
     <i class="fa fa-edit edit-edu">edit</i>
     <i class="fa fa-times delete-edu"></i>
   </div>

Answer 1

您可以将代码存储在另一个.html文件中，然后使用另一个AJAX调用将其拉动：

var FormHTML = '';
$.get('form.html', function(data) {
    FormHTML = data;
});

然后，要获得您的值，您可以使用可以轻松更换的东西来设置输入HTML。我刚刚将对象名称包装在某些#之间：

<input type="hidden" name="ed.pageByMajorPid.id" value="##pageByMajorPid.id##" id="majorId1" label="Class" cssClass="form-control">

然后用您的实际值替换这些值，只需进行一个循环：

for (var name in value) {
    if (typeof value[name] != 'object') { // If not an object, replace the value
        formHTML = formHTML.replace('##' + name + '##', value[name])
    } else { // Else if it is an object, loop through it
        for (var name2 in value[name]) {
            formHTML = formHTML.replace('##' + name + '.' + name2 + '##', value[name][name2])
        }
    }
}
$('#' + id).replaceWith(formHTML);

希望对您有用，让我知道：）

Answer 2

您可以使用模板引擎，例如Mustache https://mustache.github.io/