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> 

注上面的代碼被測試&工作正常。