Javascript .get返回的数据表单是否允许.html填充表单？

使用jQuery/jQueryUI，我想使用下面的HTML/JS填充一个表单

url editController/loadContents将返回一些数据，我相信.html将根据数据填充表单，但数据应该具有什么结构

我在jQueryUI文档中能找到的唯一示例是单元素表单

我猜某个JSON看起来像这样

{
     "starttime": "10:00",
     "endtime": "11:00",
 }

。。。将填充输入字段。但如何提供选择的选项以及其中一个选项指定为“已选择”呢

<div id="dialog" title="Basic dialog">
  <!-- loaded from ajax call -->
  <form id="exampleForm">
    <fieldset>
    <label for="activity">Activity</label>
    <br />
    <select name="activity" id="activity" class="ui-widget-content ui-corner-all">
    </select>
    <br />
    <label for="subactivity">Sub-Activity</label>
    <br />
    <select name="subactivity" id="subactivity" class="ui-widget-content ui-corner-all">
    </select>
    <br />
    <label for="activity">Reason</label>
    <br />
    <select name="reason" id="reason" class="ui-widget-content ui-corner-all">
    </select>
    <br />
    <label for="starttime">Start</label>
    <br />
    <input type="text" name="starttime" id="starttime" class="text ui-widget-content ui-corner-all" />
    <br />
    <label for="endtime">End</label>
    <br />
    <input type="text" name="endtime" id="endtime" class="text ui-widget-content ui-corner-all" />
    <br />
    </fieldset>
    <input type="button" onclick="Save()" />
  </form>


</div>

<script>
  $(function() {
      $('.myPop').click(function() {
          $.get("editController/loadContents", function(data){
             $("#dialog").html(data);
           });           
          $("#dialog").dialog('open');
      });
  });


function Save(){
 $.post("/editController/Edit", $("#exampleForm").serialize(),
  function(data){
     $("#dialog").dialog('close');
    //update grid with ajax call
  });
}

</script>

顺便说一句，我已经根据网站上非常有用的答案改编了这段代码

.html我相信会填充 表单基于数据，但什么 数据应该具有什么结构

.html只是将jQuery选择器中匹配元素的html内容设置为您提供的内容。没有基于JSON对象的现有输入值的自动设置

这给您留下了两个选择：

使服务器端代码返回一个填充的HTML表单，盲目使用.HTML，或 编写JavaScript将从服务器返回的原始数据与页面上存在的输入相关联。 但是，未来的选择是什么 选择提供的和 指定为“选定”的选项

<div id="dialog" title="Basic dialog">
  <!-- loaded from ajax call -->
  <form id="exampleForm">
    <fieldset>
    <label for="activity">Activity</label>
    <br />
    <select name="activity" id="activity" class="ui-widget-content ui-corner-all">
    </select>
    <br />
    <label for="subactivity">Sub-Activity</label>
    <br />
    <select name="subactivity" id="subactivity" class="ui-widget-content ui-corner-all">
    </select>
    <br />
    <label for="activity">Reason</label>
    <br />
    <select name="reason" id="reason" class="ui-widget-content ui-corner-all">
    </select>
    <br />
    <label for="starttime">Start</label>
    <br />
    <input type="text" name="starttime" id="starttime" class="text ui-widget-content ui-corner-all" />
    <br />
    <label for="endtime">End</label>
    <br />
    <input type="text" name="endtime" id="endtime" class="text ui-widget-content ui-corner-all" />
    <br />
    </fieldset>
    <input type="button" onclick="Save()" />
  </form>


</div>

<script>
  $(function() {
      $('.myPop').click(function() {
          $.get("editController/loadContents", function(data){
             $("#dialog").html(data);
           });           
          $("#dialog").dialog('open');
      });
  });


function Save(){
 $.post("/editController/Edit", $("#exampleForm").serialize(),
  function(data){
     $("#dialog").dialog('close');
    //update grid with ajax call
  });
}

</script>

要将选项动态插入现有的select元素，只需生成一个新的选项元素并附加它：

---

显然，您必须使代码适应从服务器端代码返回的JSON数据，可能需要循环执行您返回的一系列活动，并为每个活动创建一个新选项。

非常感谢非常有用的答案-我对humble.html的期望比合理的要高！