W3.JS Http 請求
從伺服器讀取資料
w3.getHttpObject(file.js,function)
此頁面上的示例與上一頁的示例相同,只是資料是從 Web 伺服器請求的:customers.js
填充下拉列表
示例
<select id="id01">
<option w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3.getHttpObject("customers.js", myFunction);
function myFunction(myObject) {
w3.displayObject("id01", myObject);
}
</script>
親自嘗試 » 使用 CSS »填充列表
示例
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3.getHttpObject("customers.js", myFunction);
function myFunction(myObject) {
w3.displayObject("id01", myObject);
}
</script>
親自嘗試 » 使用 CSS »填充表格
示例
<table id="id01">
<tr>
<th>客戶</th>
<th>城市</th>
<th>國家</th>
</tr>
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
<script>
w3.getHttpObject("customers.js", myFunction);
function myFunction(myObject) {
w3.displayObject("id01", myObject);
}
</script>
親自嘗試 » 使用 CSS »填充另一個表格
示例
<table id="id01">
<tr>
<th>標題</th>
<th>藝術家</th>
<th>價格</th>
</tr>
<tr w3-repeat="cd">
<td>{{title}}</td>
<td>{{artist}}</td>
<td>{{price}}</td>
</tr>
</table>
<script>
w3.getHttpObject("cd_catalog.js", myFunction);
function myFunction(myObject) {
w3.displayObject("id01", myObject);
}
</script>
親自嘗試 » 使用 CSS »