$.getメソッドを使って非同期通信でapiを表示する
Ajaxでapiを表示する
動的なページで自作したapiを静的なフロントのページで表示させる必要があったので備忘録として残します。
laravelでapiの作り方
動的なページ側での話。
Http/Controllers/APIにapi用のコントローラーを作成。
今回はFAQのAPIを作る。
FAQAPIController
class APIFAQController extends Controller
{
public function index(Request $request){
$faq = Faq::all();
header("Access-Control-Allow-Origin: *");
return Response::json($faq);
}
}
routeのapi.phpにapi用のルートを設定する
//FAQ API
Route::get('/index','API\APIFAQController@index')->name('api.index');
これでURLに api/index にアクセスするとjsonでレスポンスが返ってくる
postmanで確認するとapiの中身が確認できる。
apiの受け取った通信データの表示方法
ここから静的ページサイトでどうやって表示させるかという話。
$.getメソッドを使って通信データを取得できる
$.get('apiのurl',function(data))
functionの中のdataが引数で通信データを受け取ることができる。
index.html
$.get('apiurl',function(data){
//処理を書く
})
あとは処理を書いていけばよい
index.html
<script>
$(function(){
$.get('https://faq.com/api/index', function(data){
for(var i=0; i<data.length; i++){
var question = data[i].question;
var answer = data[i].answer;
console.log(question);
console.log(answer);
}
</script>
こんな感じです。
Author And Source
この問題について($.getメソッドを使って非同期通信でapiを表示する), 我々は、より多くの情報をここで見つけました https://qiita.com/ibarakishiminn/items/86eaa9859c8ebbb03b00著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .