Axiosとは、AxiosでGETリクエストを実装するには？
Axiosとは、AxiosでGETリクエストを実装するには？ Axiosは、JavaScriptのHTTPクライアントライブラリとして、APIとの通信を行う時に非常に通用されるツールになります。それでは、AxiosでGETリクエストを送信するには、どうしたらいいですか？本文では、Axiosを詳しく紹介した上、それを使ってGETリクエストを実装する方法を皆さんに紹介します。 Axiosは、JavaScriptのHTTPクライアントライブラリとして、APIとの通信を行う時に非常に通用されるツールになります。それでは、AxiosでGETリクエストを送信するには、どうしたらいいですか？本文では、Axiosを詳しく紹介した上、それを使ってGETリクエストを実装する方法を皆さんに紹介します。また、Axiosより直感的でAPIリクエストを送信したり、レスポンスを取得したりできる方法も一緒に紹介していきた
TypeScriptで開発作業を効率化！1年間使って感じた3つのメリットを紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのザワです。 私がTypeScriptを使い始めて季節が一巡と少し経ちました。いつの間にかTypeScriptに毎日触れる生活になりました。今回はこれまでの短いTypeScript人生の中で便利だと心の底から思ったことを整理していきたいと思います。 パッと思いつくのは下記の3つです。 関数が何を受け取るのかわかりやすい 何のIDかわかりやすい APIリクエスト・レスポンスがわかりやすい 3つを通して思うのは、探したり考えたりするいわゆる「作業的な時間」が減るので開発中のストレスを感じることも減ったということです。 では、前述した3つを詳しく説明していきたいと思います。 1.関数が何を受け取るのかわかりやすい const Position = { Top: 1, Right: 2, Bottom: 3, Left: 4, }; const getPosition = (
「Google Fonts」にfont-displayを適用する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
【2019/7/22 追記】 Google Fontsから公式にfont-display適用方法が提供されました！ クエリパラメータ display によって、font-displayの適用が可能になりました！ 合わせて、Google Fontsから提供されるlinkタグに、デフォルトでfont-display: swap;が設定されるようになっています。 詳細については、こちらのGitHub Issueをご参照ください。 こんにちは。フロントエンドエンジニアのつっちーです。 以前の記事で、「Google Fontsへのリクエストは、Google Fontsから提供されるlinkタグをそのまま使用するのがベスト」とまとめました。実際、ブラウザに応じて最適なフォント形式が自動的に取得され、場合によってはunicode-range属性も併用されるのでメリットは大きいです。 ただし、一点だけ、デ
Ajaxで動的に追加したSNSボタンを表示させる方法と、SNSボタンの再読み込みについて | Yuhiisk
どうも、イソップです。 Ajaxで読み込んだコンテンツの中にSNSボタンがあったとしても、レンダリングされません。 さぁ、困りました。 でも調べてみたら、表示させる方法がちゃ〜んと用意されていましたよ。 ボタンだけを再読み込み（リロード）したいときにも使えます。 Twitter JavaScript Interfaces for Twitter for Websites | Twitter Developers HTML <!-- 事前にtwitter-widgetの読み込み --> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s
Google ウェブマスター向け公式ブログ [JA]
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
JS-XLSX - JavaScriptでExcelファイルを解析
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebフォームでCSVファイルをアップロードしてください、というのはよくある機能です。しかしCSV自体解析するのが大変だったり、ユーザが作成するのも一手間かかるのであまり効率的とは言えません。 そこで、ユーザにはExcelファイルをそのままアップロードしてもらいましょう。その際使うのはJS-XLSX、JavaScriptによるExcelファイルパーサーです。 JS-XLSXの使い方 JS-XLSXのデモです。ドロップしたExcelファイルを解析して、CSVにしています。 さらにJSONにもできます。 JS-XLSXを使えば、Webブラウザ上でExcelファイル（ODSも可）を解析してAjaxでJSONだけを送ると言ったこともできます。これならシステムで扱うのも簡単そうです。さらにJ
wordpressで使ってみるajaxの基本 | hellooooworld.com
wordpressでのajaxの基本的な使い方を紹介、解説する。javascriptネイティブ、jQueryでの書き方を併記してajaxの理解を深められるように努めた。コード例を掲載。デモページあり。ajaxを勉強したい人向け。wordpressでajaxを使ってみる 最近では当たり前のように使われていて、空気のような存在になっているajax。その所為かネット上では古い情報と新しい情報とが入り乱れており、初心者にとってはなかなか情報を得るのが難しい状況下もしれない。 すでに習熟している人にとっては当たり前すぎる技術であり、その為ライブラリを用いたajaxの解説(主にはjQuey)の例がほとんどで、javascriptネイティブで書かれることは少ない そんな中、ajaxの基本的な使い方をwordpressを通じて解説してみたいと思う。 ajaxについて もうご存知かと思うが、一応説明しておこ
HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
Ajaxのページ遷移でURLが変更できるjQueryプラグイン「PJAX」
Ajaxのページ遷移でURLが変更できるjQueryプラグイン「PJAX」の紹介です。 １．はじめに jQuery.ajax()を使ってウェブページのコンテンツを入れ替えた場合、ブラウザのURLは変更されません。 が、本エントリーで紹介する「PJAX」を利用すれば、コンテンツを入れ替えと同時にURLの変更を行うことができます。 PJAX 「PJAX」とは「pushState」と「Ajax」を組み合わせた機能をもつjQueryプラグインです。 URLの変更は「History API」というHTML5の機能を使って実現しています。 「pushState」は、History APIで履歴を追加するメソッドを指します。 ２．プラグインのダウンロード PJAXのダウンロードページにアクセスし、最新版のjquery.pjax.jsまたはjquery.pjax.min.jsをダウンロードします。 ３．サ
jQuery.ajax()のJSONやJSONP取得で200 OKなのにエラーになる件のまとめ
jQuery.ajax()のJSONやJSONP取得で、200 OKにもかかわらずエラーになる件についてまとめました。 １．問題点 次のようなJSONデータを読み込むスクリプトを書きました。 JSONデータ {'foo':'bar'} スクリプト <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function(){ $.ajax({ url: "sample.json", dataType: 'json', }) .done(function(data) { console.log("OK"); }) .fail(function(xhr, textStatus, errorThrown) { console.log("NG:" + xh
jQuery.ajax()でファイルをアップロードする方法
jQuery.ajax()でファイルをアップロードする方法を紹介します。 １．はじめに jQuery.ajax()で画像ファイルをサーバに送信し、バックエンドのPHPで画像の幅・高さを返却し、それを表示するという簡単なプログラムを組んでみました。 フロントエンド <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function(){ $('#foo').submit(function(){ $.ajax({ url: "test.php", type: 'POST', data: { 'file': $('#file').val() }, dataType: 'json' }) .done(function( data ) { $('#re
WordPressの記事をAjaxで追加読み込みしたときの話 | ocws BLOG
追加読み込みをAjaxを使って表示させたいなと、思いまして いろいろ探してましたらいいのがありましたので今回はそのやり方を詳しく紹介したいと思います。※プラグインは使ってません。 参考にさせていただいたサイトは WordPress ページングはやめてAjaxローディングにする です。では始めたいと思います。 もし、急ぎで知りたい方はページの一番下のまとめのところをご覧下さい。 主要ファイル 今回使用するファイルは以下の3ファイルです。（ファイル名は任意で大丈夫です。） ・index.php（追加読み込みしたい箇所があるファイル） ・style.js（「more.php」で生成したHTMLを「index.php」に反映するファイル） ・more.php（データベースから値を持ってきてHTMLの基礎を生成するファイル では、index.phpから順番に説明していきたいと思います。 index.
a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えるスクリプト -jQuery A+ | コリス
HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。 デモページ デモでは、a要素をトリガーとするさまざまな機能がclassで設定できます。対応している機能は以下のようにたくさんあります。 リンクを別窓（タブ）で開く リンクを開く前に確認ダイアログを表示 iframeを使ったダイアログを表示 Ajaxを使ったダイアログを表示 モーダルウインドウを表示 フレーム内にリンクを表示 通知パネルを表示 印刷を表示 ページ内アンカーへアニメーションでスクロール スクロールのスピード設定 スクロールの位置設定 ※それぞれ細か
jQueryでajax()の重複実行を回避する方法
jQueryでajax()の重複実行を回避する方法を紹介します。 １．問題点 次のような、ajax()メソッドを使って「http://user-domain/foo.cgi」にアクセスし、実行結果を取得するコードがあります。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $('#execute').click(function(){ $.ajax({ url: "http://user-domain/foo.cgi", type: "GET", dataType: 'html', }) .done(function( data ) { $('#foo').html(data); }) .fail(function(
jQueryのajax()を中断する方法
jQueryのajax()を中断する方法を紹介します。 １．問題点 次のように、ajax()メソッドでHTMLを取得するコードがあります。 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('#execute').click(function(){ $.ajax({ url: "http://user-domain/foo.cgi", type: "GET", dataType: 'html', }) .done(function( data ) { $('#foo').html(data); }) .fail(function( data ) { // ... }); }); }); </script> <input type="button" id="exec
jQuery.ajax()で取得したHTMLの一部を抜き出す方法
jQuery.ajax()で取得したHTMLの一部を抜き出す方法を紹介します。 １．問題点 次のように、ajax()メソッドで取得したHTMLを丸ごと埋め込むサンプルはネットで多くみかけます。 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $.ajax({ url: 'http://user-domain/foo.html', dataType: 'html', }) .done(function(data) { $("#bar").html(data); }) .fail(function(data) { // ... }); </script> <div id="bar"></div> が、取得したHTMLの一部だけを抜き出して利用したい場合、どのように記述す
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Kimiya Kitaniの徒然なるブログ
http://unirry.com/facebook_json_feed-248.html
Free FTP software for your browser - Monsta FTP