下拉菜单，使用AJAX和DOM处理API

Dropdown menu with processing API with AJAX and DOM

本文关键字：DOM 处理 API AJAX 使用下拉菜单更新时间：2023-09-26

我正在从API获取数据，但它没有出现在我的下拉菜单中。

如果我回显?act=showprovince，结果在那里。

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');
            }
        });
    }

我检查了你的代码，你所有的问题都在这一行JavaScript函数loadProvinsi():

province = '<option value="'n['province_id']'">'+n['province']+'</option>';

您错过了两个'+'符号!

所以正确的代码应该是:

province = '<option value="'+n['province_id']+'">'+n['province']+'</option>';

剩下的代码看起来没问题，通过这两个小的改变下拉菜单显示了省份

如果您可能需要完整的javascript函数loadProvinsi()将看起来像这样:

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');
        }
    });
}