AJAXでJSONデータを表示＆保存する | カテゴリー: AJAX | 作業メモ
JSONファイルから全データを読み込んで新規データを追加するに引き続き、AJAXの勉強に以下のようなものを作ってみた。 公安9課のメンバーデータが保存されたJSONデータを読み込んで、メンバーデータ表示用のプルダウンを表示。同ページのフォームから入力されたデータをページ遷移なしでJSONデータとして保存し、プルダウンに保存された項目を反映。 ミニマムな雛形として作ったので、エスケープ等してないがajaxなデータ保存＆読み込みの基本形はこんな感じと。 HTML プルダウンメニュー表示の空のselectを用意。「onsubmit=”return false;”」でページ遷移無効に、javascriptがオフられてた場合も考えてactionとmethodはそれぞれ書いておく。 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran
1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法
$.ajaxによるJSON読み込み方法 例えば以下のようなJSONの場合 [ { "version": "1.5", "codename": "Cupcake" }, { "version": "1.6", "codename": "Donut" }, { "version": "4.4", "codename": "KitKat" } ] $.ajaxでの読み込みは下記のようになる $.ajax({ type: 'GET', url: 'https://iwb.jp/s/js/data.json', dataType: 'json', success: function(json){ var len = json.length; for(var i=0; i < len; i++){ $("#a").append(json[i].version + ' ' + json[i].coden
jQueryでCSVを読み込んでみる
CSVファイルの文字コードはUTF-8ですが、エクセルで作成した後はShift-jisになっているので、 文字コードをUTF-8に変更する必要があります。 サンプルコード JavaScript $(function() { var target = '#news'; var csvList; var insert = ''; $.ajax({ url: 'list.csv', success: function(data) { // csvを配列に格納 csvList = $.csv()(data); // 挿入するHTMLを作成 for (var i = 1; i < csvList.length; i++) { insert += '<li id="' + csvList[i][0] + '">'; insert += '<div class="image"><img src="' +
JavaScript(jQuery)からPHPのAPIを利用する - Qiita
はじめに 類似の記事はありますが、個人的に納得のいくものが無かったので書いてみます。 基本形 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <h1>設定</h1> <p> 年齢: <input type="text" id="age" value="24"><br> 職業: <input type="text" id="job" value="学生"><br> <input type="button" id="execute" value="送信"><br> </p> <h1>結果</h1> <p> 可否: <input type="text" id="result" value=""><br> 内容: <input type="text" id="d
Pocketのシェア数をJavaScriptのAjaxで取得する方法
Pocketは、外部サービス向けにAPIが公開されていません。 ですので、シェア数を取得する方法は、情報が少ないです。しかも、JavaScript（jQuery）で取得する方法にいたっては、ちょっと検索した限りでは見つかりませんでした。 なので、いろいろ試行錯誤してみた結果、何とかうまくいった方法があったので、その方法を紹介したいと思います。 photo by A Continuous Lean Pocketでシェア数を取得する Pocketのシェア数をPHPから取得するには、以下の方法があります。 [試] Pocketブックマーク数（ある意味シェア数）の取得方法 | Pocket公式APIないけどどうする？ | 試行錯誤ライフハック pocket のブックマーク数の取得方法とオリジナル SNS ボタンの設置方法 | キャリコ PocketはAPIを公開していないので、上記のようなPock
Ajax(pjax)遷移時におけるSNSボタン再構築
Updated 2013.10.04 / Published 2013.10.04 HTML5のhistoryAPI（pushState）とAjaxを組み合わせた遷移（pjax）時に、Twitterのwidgets.jsで埋め込んだツイートボタンが更新されない事態に遭遇しました。pushStateでURLは変更できているにも関わらず、ツイートボタンを押しても取得されるタイトルとURLは最初にツイートボタンを表示したときの遷移前の状態であり、ごっそり入れ替えてもDOMが再構築されていない様子。 TwitterのAPIドキュメントを探すも、Ajax遷移時にDOMを再構築させるような使い方はどこにも載っていない。そこで、検索語を「Tweet button Ajax」に変えてみると、Cannot update tweet button with AJaxという記事がヒット、回答欄に解決策を提示して
HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
jFeedMixer – CalmTech
複数ブログで管理しているRSSフィードを統合して、ウェブサイト上に表示させることができるjQueryプラグイン、jFeedMixer 0.2.0 をリリースします。このプラグインはGoogle AJAX Feed API を使用しているので、ご利用の場合は、AJAX API Keyを事前に取得する必要があります。 jFeedMixer 0.2.0 – github jFeedMixerを使うシチュエーション 複数ブログを管理していて、メインサイトのトップページに各ブログのRSSフィードを時系列順で表示したい。 デモ jFeedMixerの使い方 scriptタグで各ライブラリを読み込み、任意のdivを指定してjFeedMixerを呼び出します。 表示オプション feeds: ["feed URL", "…"] 必須 複数のフィードURLを指定できます。RSS、Atomなどが表示されるUR
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptプログラミング講座【XMLHttpRequest について】