2016-11-17 28 views
4

我試圖通過ajax在我的html頁面上使用php從API獲取數據,當我嘗試使它直接鏈接它工作成功,但是當我嘗試在我的drop上使用ajax調用它時下來,這就像沒有打電話AJAX ..ajax不會在PHP中調用下拉後作出響應

這裏是我的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-2.1.3.min.js"> 
     </script> 
     <script type="text/javascript" src="js/script.js"></script> 
     <title>Penggunaan API RajaOngkir | IDMore</title> 
</head> 
<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>Province</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> 

這裏是我的JavaScript。

$(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>'; 
       <option></option> 
       province = province + ''; 
       $(id).append(province); 
      }); 
     }, 
     error: function() { 
      $(id).html('ERROR'); 
     } 
    }); 
} 
+0

什麼''裏面的腳本? – Banzay

+0

我希望觸發我從api數據獲得的省名稱列表? –

+0

你的瀏覽器控制檯有什麼錯誤,如果有的話? –

回答

5
$.each(response['rajaongkir']['results'], function(i, n) { 
       var option = '<option value="'+n['province_id']+'">'+n['province']+'</option>'; 
       province += option; 
      }); 
       $(id).append(province); 

請與本code.And再試一次更換你的每一個功能。

+0

你認爲'省=省+'''有用嗎?你爲什麼在循環之外放置'$(id).append(province);'? – Banzay

+0

經過變更後,您所做的省份只包含最後一項結果的兩倍。因爲它包含一個錯誤,所以我放棄了你的答案。 – Banzay

+0

@Banzay現在是否正確? –