質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSF

JSF (JavaServer Faces)とは、JavaベースのWebアプリケーションフレームワークの一つです。

Java EE

Java EE(Java Enterprise Edition)はJavaベースのテクノロジーとその相互運用の仕様をまとめたものです。サーバとクライアントのアーキテクチャを規定し、特定アプリケーションのクラス用に定義されたテクノロジー設定のプロファイルを使用します。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

1032閲覧

jsfとJavaScriptによるweb api の取得法について

YukiOtake

総合スコア15

JSF

JSF (JavaServer Faces)とは、JavaベースのWebアプリケーションフレームワークの一つです。

Java EE

Java EE(Java Enterprise Edition)はJavaベースのテクノロジーとその相互運用の仕様をまとめたものです。サーバとクライアントのアーキテクチャを規定し、特定アプリケーションのクラス用に定義されたテクノロジー設定のプロファイルを使用します。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2017/12/22 06:52

javaEEを使用して開発を行っています。
現在WEB APIを使用して郵便番号から住所等の情報を取得したいと考えています。
WEB APIを使用する際にjavaだといい参考例がなかったというのとJavaScriptのほうが楽にかけそうだと考えJavaScriptで処理してBeanに渡そうとしています。(今回のコードでは渡せない)

以下のコードがjsonを取得する「xhtml」ファイル(api.xhtml)なのですがMS Edgeで

Microsoft Edge

SEC7120: 元の http://localhost:8080 が Access-Control-Allow-Origin ヘッダーに見つかりません。

というエラーが出力されてしまいます。
chromeでも同様なエラーが出ました。

Google Chrome

Failed to load http://geoapi.heartrails.com/api/json?method=searchByPostal&postal=673-0877: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://xmlns.jcp.org/jsf/core"> <h:head> <title>Hoge</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </h:head> <body> <h2>Test</h2> <hr/> <h:form id="form"> <h:panelGrid columns="3"> <h:outputLabel value="郵便番号:"/> <input id="zip" type="text" size="45" /> <h:inputHidden value="#{weather.zip}" id="zipHidden" size="45"/> <h:outputLabel value="address:"/> <input id="address" type="text" size="45" /> <h:inputHidden value="#{weather.address}" id="addressHidden" size="45"/> </h:panelGrid> <input id="search" type="button" value="検索" onclick="searchButton();"/> </h:form> <script type="text/javascript"> function searchButton() {// [検索]ボタンクリックで郵便番号検索を実行 var query='http://geoapi.heartrails.com/api/json?method=searchByPostal&amp;postal=673-0877'; $.getJSON(query,function(data){ console.log(data); }); } </script> </body> </html>

--
参考にしたサイトのコピペでは動いたため多分このAPIの呼び方や使い方が間違っているようなのですがよくわからないので教えてください。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/12/22 16:13

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。
YukiOtake

2017/12/23 11:33

コメントして終わってしまっていました。ご指摘ありがとうございます。
guest

回答1

0

ベストアンサー

https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control
CORSに引っかかってるかと

JSONP対応してるようなので

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> </body> <script type="text/javascript"> var query='http://geoapi.heartrails.com/api/json?callback=?'; $.getJSON(query, { 'method': 'searchByPostal', 'postal': '673-0877' }, function (data) { console.log(data); } ); </script> </html>

これでデータ取得までは出来るの確認しました

投稿2017/12/22 07:22

rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YukiOtake

2017/12/22 16:02

できましたありがとうございます! 使い慣れてないのでとても助かりました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問