带有 Json API 的 HTML/Bootstrap 表单

Question

我想创建一个简单的 HTML 表单（最好使用引导程序）。

在此表单上，一些输入元素由用户填写（这很简单！），但我还需要使用 json 数据调用 API 来填写下拉框。比如国家列表等。

如何在表单中实现 API？

谢谢

    <form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>My form</legend>

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="title">Title</label>
  <div class="controls">
    <input id="title" name="title" type="text" placeholder="Article on Banking,etc." class="input-medium">

  </div>
</div>

<!-- Select Basic -->
<div class="control-group">
  <label class="control-label" for="Article Type">Article Type</label>
  <div class="controls">
    <select id="Article Type" name="Article Type" class="input-xlarge">
      <option>ashkanarvaneh.co.uk/test/api.json</option>
    </select>
  </div>
</div>

<!-- Textarea -->
<div class="control-group">
  <label class="control-label" for="summary">Summary</label>
  <div class="controls">                     
    <textarea id="summary" name="summary">Enthusiastically strategize superior infomediaries after clicks-and-mortar process improvements. Appropriately incubate stand-alone methodologies vis-a-vis pandemic potentialities. Authoritatively build.</textarea>
  </div>
</div>

<!-- Button -->
<div class="control-group">
  <label class="control-label" for="submit">Submit</label>
  <div class="controls">
    <button id="submit" name="submit" class="btn btn-primary">Submit</button>
  </div>
</div>

</fieldset>
</form>

Answer 1

尝试示例

<!-- Select Basic -->
<div class="control-group">
  <label class="control-label" for="Article Type">Article Type</label>
  <div class="controls">
    <select id="Article Type" name="Article Type" class="input-xlarge">
    <?php
        $countries = file_get_contents("http://ashkanarvaneh.co.uk/test/api.json");
        $countries = json_decode($countries, true);
        foreach($countries as $country)
        {
            echo "<option value='".$country['Id']."'>".$country['Description']."</option>";
        }
    ?>
      <!--<option>http://publicapidev.chambersandpartners.com/api/taggedlocations</option>-->
    </select>
  </div>
</div>

注意以上代码已经过测试，运行良好。