Ajax を使ってリアルタイムに反映する簡易投票システムを設置する ｜ KLUTCHE
Facebook の「いいね」ボタンのように、ページ遷移無しで、ON・OFF できる投票ボタンの設置と、投票数の表示方法です。 ・Ajax を使います ・jQuery と PHP を使います ・データベースは使わずテキストファイルに読み書きします デモ デモページ ハートマークをクリックすると投票数が1プラスされ、もう一度ハートをクリックすると、投票数が元に戻ります。 プラスされた数字は再度ページを開いても反映されたままです。 Ajax って難しそう こんな風に、ページ遷移なしにデータをやりとりすることを「非同期通信」と言います。 非同期通信でやり取りしたデータを元に Javascript で動的にページの一部を書き換えるのが Ajax です。 きっとすげえ難しいコード書くんだろうな･･･ そんな風に思っていました。 が、意外と簡単なんです。 助けてくれるのは jQuery！ Javasc
$.ajaxファイルアップロードでの進捗表示 - PR TIMESデザイナー&エンジニアブログ BREAK TIMES
こんにちは。フロントエンドエンジニアの本間です。 今日は$.ajaxファイルアップロードでプログレスバー表示についてです。 UIUXにおいて体感速度を短縮するのは重要で、同じ待ち時間でも進捗表示することによって体感速度が向上します。 さらにプログレスバーの色や模様によっても体感速度が変わってくるという研究結果もでているようです。 gigazine.net PRTIMESでは企業管理画面のリリース配信登録画面でワードファイルをアップする際に使っています。 やり方は$.ajaxの引数にxhrオブジェクトを渡し、progressイベントハンドラで取得します。 $.ajax({ url : api.url, async: true, xhr : function(){ var XHR = $.ajaxSettings.xhr(); if(XHR.upload){ XHR.upload.addEve
CakePHP 3 Ajaxでのテスト設定(小ネタ） | バシャログ。
皆さんどうもfujiharaです。 残暑がまだまだ続きますね。個人的に海の家が解体されているのを見ると 夏が終わるんだなって気持ちになります。 本日は CakePHP 3で Ajax しか受け付けないページでのテスト設定を紹介します。 コントローラメソッド 以下の様なメソッドの場合テスト内で$this->get(), $this->post()を 使用しても反応してくれません。 コントローラ public function ajaxOnly() { if (!$this->request->is('ajax')) { ....(エラー処理) } } この場合、メソッドへのリクエストヘッダーを以下のようにして 書き換えることによって、Ajaxを偽装できます。 テスト内 public functoin testAjaxOnly() { //以下で偽装 $this->configRequest(
PHPとMySQLで取得した値をD3.jsを使って描画するときの備忘録
タグ 1000万@typeAbemaTVairbnbAWAblocklyC++Century21CodeCampCREATOR'S HIVE （クリエイターズハイブ）CSSCTOCygamesC言語d3.jsDeNADIVEINTOCODEDMM英会話dockerDODADTPデザイナーDYMECCESESLintFintechfreeeGMOGMOペパボGoogleGoogleアナリティクスHTMLIE対策illustratorIoTIT企業IT求人ナビJACリクルートメントJavaJavaScriptjoevlogjQuerykakaku.comKLabLINELinkedinMERYMiidasmixiMySQLNHN PlayArtNianticNNTNON STYLEnoteNOVANYLONOB訪問offerboxoptPairsPhotoshopPHPphpmyadminpi
jQuery.Deferred を使ってみる。 | バシャログ。
カーテンのない家には住めない事に気がついたminamiです。 jQueryにはjQuery.Deferred というオブジェクトがあります。jQuery 1.5 のころから実装されてだいぶ経っているのですが、今までなんとなくよくわからなくて苦手意識があったので改めて使ってみました。 jQuery.Deferred ってなに？ "deferred" の意味を調べると「延期された」「遅延された」などの意味があります。乱暴にまとめてしまうと、様々な処理が終わった後に呼ばれる（遅延された）処理を監視してくれるオブジェクトと言えます。 何を言っているのかわからん 文章で書くとまどろっこしいのでサンプルを作りました。1～4の処理が全て終わったら完了の表示を出します。 jQuery.Deferred を使った処理の管理 window.setTimeout() などのタイマー処理 jQuery.ajax
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編 : 4GALAXYのメモ
16 26 08 2007 Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編 jQuery, Samples, Ajax 海外のjQueryを使ったAjaxサンプル集に日本語の紹介文をつけた記事 Effects Ajaxエフェクト集 要素の出現・消滅など全62種類のAjaxエフェクトサンプル Test new animate function 要素のAjaxアニメーションジェネレーター Use new functions stop, stopAll and pause to clear queue and stop flickering Ajaxでディレイ(遅延)を設定できるツールチップを表示サンプル Draggables | Droppables Ajaxでドロップ＆ドラッグ出来るサンプル10種類 Sortables list
JavaScript / jQueryでtableの行を「追加」「削除」「移動」「変更」させる方法
まず「リスト選択」の列の選択肢から「B」を選択します。 ⇒「リスト名」が「B」に変更されます。（変更）「追加/削除」の列の「+」ボタンを押します。 ⇒行が追加されます。（追加）追加された行の「リスト順」の列の「↑」をクリックします。 ⇒行が上へ移動します。（移動）移動した行の「リスト順」の列の「↓」をクリックします。 ⇒行が下へ移動します。（移動）最後に、好きな行の「追加/削除」の列の「-」ボタンを押します。 ⇒行が削除されます。（削除） いかがでしょうか。まあ、よくある機能ですね。では、この機能の実装方法について以下にまとめておきたいと思います。 HTMLHTMLでは、以下の点がポイントとなります。 それぞれの機能を発生させるためのイベントハンドラをセットしておきます。操作の対象となる「行」の部分は<tbody>タグ内に記述するようにします（これが後々大事になります）。JavaScrip
jQueryを使ったAjaxに関するサンプル集
jQuery API を使って作った、Ajaxに関するちょっと便利なサンプル集。 Ajax とは、「Asynchronous JavaScript + XML」の略で、ウェブページの内容の一部を、ダイナミックHTML（DHTML）で、動的に、非同期通信結果に書き換える技術。ウェブページをリロード（再読み込み）しないで、XMLなどの別ファイルと通信するという特徴がスマートだ。 jQuery を使うと、Ajax も簡単に実装できる。 jQuery.ajax(settings)で、html形式のデータを読み込み表示 jQuery の jQuery . ajax( settings ) メソッドを使った Ajax リクエストで、html形式のデータを読み込み、表示する方法。 jQuery.ajax(settings)で、JavaScriptファイルを読み込み、実行 jQuery の jQuery
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
jQuery.ajaxで簡単に非同期通信 - 背負い投げとENTER_FRAME
なんちゃってWebクリエイターがFlashやらActionScriptやらを淡々と書く。ときとき柔道の話しもする。 やっばりイマドキっぽく、jQuery.ajaxで非同期通信しよう。結構簡単にできたけど、PHPから配列をJavaScriptに戻す作法でつまずいた。普通にPHPでゲットした配列（多次元連想）をそのままechoで返すと、jQueryの方がどうしても解析できなかった。 $result = json_encode($result); echo $result; 配列をエンコードしておけば、問題解決。 ローカルのMAMP環境だとajaxのパラメータに「dataType: ‘json’」が必要だったけど、ロリポップのサーバーだと消さないといけない。そのかわりに取得してきた配列をJSON.parse()を掛ける必要がある。 デモページ 「送信」を押すと「getAr.php」を読み込んで、
jQuery.ajax(options) - jQuery 日本語リファレンス
HTTP通信でページを読み込みます。 この関数はjQueryにおけるAJAX通信の基本部分で、実際には$.getや$.postといった関数を使った方が、容易に実装できます。 但し、これらの抽象化された関数は実装の容易さと引き換えに、エラー時のコールバックなどの複雑な機能を失っています。そのような処理を実装したい場合は、やはり基幹であるこの関数を用いる必要があります。 $.ajax関数は、戻り値として XMLHttpRequestオブジェクトを返します。殆どの場合、このオブジェクトを直接操作することは無いと思われますが、例えば投げてしまったリクエストを中断する場合など、必要であれば利用して下さい。 この関数は引数をひとつだけとりますが、実際にはハッシュで、キーと値の組み合わせにより多くのオプションを受け取ります。 以下にその一覧を載せますので、参考にして下さい。 async / boolea
jQueryでAjaxはとってもカンタンだけどpost()を使うくらいならajax()を使っとくと後で泣かなくて済むかもしれない | natrium51g
jQueryでAjaxはとってもカンタンだけどpost()を使うくらいならajax()を使っとくと後で泣かなくて済むかもしれない Tweet Tweetサーバ側でゴリゴリとコードを書いていざ実行させてみるとどうにも遅い。処理を落とすわけにもいかないし、かといってユーザに処理が終わるまでボンヤリ待ってもらうのはいただけない。 そんなときは処理を分割して最低限必要な部分以外はAjaxでやっつけてしまうと吉。Ajaxの混迷期はクロスブラウザに頭を悩ませながらJavascriptでゴリゴリと実装したりしていましたが、いまはjQueryというステキライブラリーが登場したことで非常にカンタンになりました。 実際に処理にかかる時間は長いままでも、ページの読込だけでもとりあえず終わってしまえばユーザのストレスも意外にかからないものなんです。 jQueryでAjaxをする方法は基本的に3種類 Ajaxを使
pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://webcake.no003.info/webdesign/jquery-ajax-php-timer-kanshi.html
http://webcake.no003.info/webdesign/jquery-ajax-php-json-sample.html