0
APIからデータを取得していますが、ドロップダウンリストには表示されません。AJAXとDOMを使用したAPIを処理するドロップダウンメニュー
?act=showprovinceと表示される場合は、結果が表示されます。
example.html
<head>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/skeleton.css">
<script type="text/javascript" src="js/jquery.min.js">
</script>
<script type="text/javascript" src="js/script.js"></script>
<title>Penggunaan API RajaOngkir | IDMore</title>
<body>
<div class="container">
<div class="row">
<br />
<div class="twelve columns">
<h1>Hitung Ongkos Kirim</h1>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h5>Masukan Data</h5>
</div>
</div>
<div class="row">
<div class="two columns">Asal
<br />
<select id="oriprovince">
<option>Provinsi</option>
</select></div>
<div class="two columns">
<br />
<select id="oricity">
<option>Kota</option>
</select>
</div>
<div class="two columns">Tujuan
<br />
<select id="desprovince">
<option>Provinsi</option>
</select></div>
<div class="two columns">
<br />
<select id="descity">
<option>Kota</option>
</select>
</div>
<div class="two columns">Layanan
<br />
<select id="service">
<option>JNE</option>
<option>POS</option>
<option>TIKI</option>
</select></div>
<div class="two columns">
<br />
<button id="btncheck">Cek Harga</button>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h5>Harga</h5>
</div>
<hr />
<table class="twelve columns">
<tr>
<th>Servis</th>
<th>Deskripsi Servis</th>
<th>Lama Kirim (hari)</th>
<th>Total Biaya (Rp)</th>
</tr>
<span id="resultsbox">
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</span>
</table>
</div>
</div>
</body>
</link>
</link>
</head>
process.php
require_once('idmore.php');
$IdmoreRO = new IdmoreRO();
if(isset($_GET['act'])):
switch ($_GET['act']) {
case 'showprovince':
$province = $IdmoreRO->showProvince();
echo $province;
break;
default:
# code...
break;
}
endif;
idmore.php
class IdmoreRO{
public function __construct()
{
}
//menampilkan data provinsi
public function showProvince()
{
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "http://rajaongkir.com/api/starter/province",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"key: 3f01f13ce2b42ba983ad3f3bc4852f84"
),
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
$result = 'error';
return 'error';
} else {
return $response;
}
}
}
script.js
$(document).ready(function(){
loadProvinsi('#oriprovince');
loadProvinsi('#desprovince');
$('#oriprovince').change(function(){
alert('yussan');
});
$('#desprovince').change(function(){
alert('yussan');
});
});
function loadProvinsi(id){
$('#oricity').hide();
$('#descity').hide();
$(id).html('loading...');
$.ajax({
url:'process.php?act=showprovince',
dataType:'json',
success:function(response){
$(id).html('');
$province = '';
$.each(response['rajaongkir']['results'], function(i,n){
province = '<option value="'n['province_id']'">'+n['province']+'</option>';
province = province + '';
$(id).append(province);
});
},
error:function(){
$(id).html('ERROR');
}
});
}
1- _html_形式でエラーがあります。 '
'タグの前に' 'タグを閉じなければなりません。また最後の2つの ''タグは余分です。削除してください。これはあなたの問題を解決するかもしれません。そうでなければ、あなたの_ajax_呼び出しの結果として_inspector_に何が表示されますか？ – EhsanT@EhsanT番号1に書いたことをやっていてまだ解決していないことをやっていて、番号2に私は州のリスト名を見る（私はAPIデータから得ます） –