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> 

注上面的代码被测试&工作正常。