ajaxでのxml取得について

前提・実現したいこと

郵便番号を入力し、指定の番号をajaxにてxml形式で取得したいと考えています。
しかし、現在郵便番号入力後、ボタンを押しても検索できないという問題があります。
エラーメッセージが表示されていないので困っていますので、ご協力いただければと思います。

使用しているリクエストURL：zipcloud
http://zipcloud.ibsnet.co.jp/doc/api

ソース参考サイト：
http://program-memo.com/archives/41

該当のソースコード

html
1<body>
2    <div class="contents">
3        <form class="address" action="index.html" method="post">
4            <div class="wrap">
5                <p class="address__text">郵便番号：</p>
6                <input type="text" name="address" id="js_address__form" class="address__form" value="" maxlength="7">
7                <input type="submit" name="submit" class="address__btn" value="郵便番号検索">
8            </div>
9            <p class="address__attention">郵便番号はハイフン抜きの記載をお願い致します。</p>
10            <div class="result"></div>
11        </form>
12        <div id="js_result" class="result"></div>
13    </div>
14    <script type="text/javascript" src="./js/index.js"></script>
15</body>

css
1* {
2  padding: 0;
3  margin: 0;
4}
5body {
6  color: #333;
7  letter-spacing: 1px;
8}
9.wrap {
10    display: flex;
11    align-items: center;
12    margin-top: 2%;
13}
14.address__form {
15    height: 20px;
16}
17.address__btn {
18    margin-left: 2%;
19}
20.address__attention {
21    font-size: 0.8em;
22    color: #f00;
23}
24.address__attention::before {
25    content: "※";
26}

jQuery
1$(function(){
2  //検索ボタンクリック時に実行
3  $('.address__btn').on('click', function(){
4    //入力値をセット
5    var param = {zipcode: $('#js_address__form').val()};
6    //zipcodeのAPI
7    var send = "https://zipcloud.ibsnet.co.jp/api/search";
8    $.ajax({
9      type: "GET",
10      cache: false,
11      data: param,
12      url: send,
13      dataType: "jsonp",
14      success: function (res) {
15        //結果によって処理の振り分け（正常：200の場合）
16        if(res.status == 200){
17          //該当の住所を表示
18          $('#js_result').html(res.results);
19        } else {
20          //エラー時
21          $('#js_result').html(res.message);
22        }
23      },
24      error: function(XMLHttpRequest, textStatus, errorThrown){
25        console.log(XMLHttpRequest);
26      }
27    });
28  });
29});

試したこと

xml形式で取得するのがダメだったのかと思い、json, jsonpでも試してみましたが変わりませんでした・

行動規範の内容に同意します

回答1件

ベストアンサー

jsonはCORSに引っかかるのでだめっぽいですね
jsonpな普通に配列として返ってきますよ

投稿2020/07/30 06:22

yambejp

総合スコア116724

yambejp

2020/07/30 06:22

$(function(){ const url="https://zipcloud.ibsnet.co.jp/api/search?zipcode=1000001"; $.ajax({ url, dataType:"jsonp", }).done(function(data){ console.log(data); }); });

nagano0141cafe

2020/08/02 10:11

ご回答ありがとうございます。通信できなかった原因はhtmlのほうでformタグを使用していたのが原因でした。これを削除したら正常にリクエストを送れるようになりました。また、jQuery記載のsuccessとerrorもご回答を参考にさせていただき、doneとfailに変更致しました。ご協力感謝致します。

行動規範の内容に同意します