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
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のDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
jQuery.ajax()の非同期通信で実行順序を保証する方法
jQuery.ajax()の非同期通信で実行順序を保証する方法を紹介します。 具体的には、jQuery.ajax()による非同期通信を連続して実行する場合やjQuery.ajax()メソッドによる非同期通信と他の処理を続けて実行する場合、お互いの実行順序を保証する方法です。 本エントリーではjQuery1.8を使って解説します。その関係で、done()メソッドを使っています。done()がサポートされていないバージョンであればsuccess()に読み替えてください。 １．jQuery.ajax()の仕様 「仕様」という表現は適切でないかもしれませんが、例えばjQuery.ajax()による非同期通信を連続実行した場合、実行結果の順序は不定です。 簡単なサンプルとして、for文の中でjQuery.ajax()を実行するコードを用意しました。 <meta charset="utf-8" />
jQuery.ajax()のまとめ
jQuery.ajax()について逆引きリファレンスっぽくまとめてみました。 まとめた理由は、ネットで「jQuery.ajax」や「jQuery.ajax サンプル」などで調べても、いい感じの内容がなかなかヒットしないことと、よくヒットするサイトの情報が古かったりする（1.4で止まっているとか）ためです。 ということで、2012年10月現在2014年10月現在の「jQuery.ajax()」などをざっと調べて作ってみました。 初心者向けの内容です。すべてのオプションは網羅できていません。とりあえずサンプルコードがほしい方は１５項をご覧ください。 若番から必要と思われるものを順番に並べているつもりですが、後半は適当です。また、各項のサンプルはなんとなく積み上げていく感じにしています。 調べている間にも3つくらい新しい発見（といっても古い情報ですが…）があり、jQueryが日々進化していること
jQuery.ajaxメソッドのdataオプションに設定する変数がundefinedの場合の動作について
jQueryのajaxメソッドでdataオプションに設定する変数がundefinedの場合の動作について調べてみました。 動作というのは、POSTデータ・GETデータのことです。 １．dataオプションにJSON（または連想配列）を利用した場合 jQueryのajaxメソッドでdataに設定する変数の値にJSONや連想配列（ハッシュ）などを利用すれば、undefinedの変数についてはPOSTデータやGETデータとして渡されません。 サンプルソース <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function(){ $('#send').click(function(){ var para
setTimeout と arguments.callee で、$.ajax() を retry する
■ [javascript][jquery] setTimeout と arguments.callee で、$.ajax() を retry する 昨日、jQuery の $.ajax() の実行が失敗したときに、少しまってから retry させたかったんだけど、その方法が分からずはまったのでメモ。 arguments.calleeとsetTimeoutを使ってJavaScriptのリトライ処理を簡単に書く方法 | さくらたんどっとびーず を参考にした。 (function() { var callee = arguments.callee; $.ajax({ url: 'http://example.com/api/hoge', error: function () { setTimeout(callee, 1000); } }); })(); $.ajax() は、処理に失敗したとき
Ajaxコンテンツを検索エンジン(Google)にクロール・インデックスさせる方法
[対象: 上級] Ajax利用したコンテンツをGoogleにクロール可能・インデックス可能にさせるための設定方法を今日は取り上げます。 すでにAjaxを理解している人向けなのと自分へのメモを兼ねているのでAjaxに対する細かな説明や用語解説は省きます。 「#」（ハッシュ）がURLに含まれている場合、#以下のURLをGoogleを含む検索エンジンはインデックスしません。 A. http://www.suzukikenichi.com/ajax.html#abc B. http://www.suzukikenichi.com/ajax.html#xyz 上のAとBはどちらも、http://www.suzukikenichi.com/ajax.html というURLをクロールしてインデックスするだけです。 #付きのURLをインデックスすることはありません（終わりに補足説明あり）。 Ajaxでは、
AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた
Posted: 2011.06.20 / Category: javascript / Tag: Ajax, HTML5 高速なWebアプリケーションを作成するにはAjaxがなくてはならないものとなりました。AjaxにはURLが更新されず、そのためブラウザの戻るも使用でません。 このような問題を解決するためにHTML5で追加されたのが「pushState」です。 pushStateを使用していないサンプル jQueryのloadメソッドを使用したコンテンツ切り替えの簡単なサンプルです。 page1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>page1</title> <link rel="stylesheet" href="style.css"> <script type="text
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
Posted: 2012.02.03 / Category: javascript / Tag: jQuery jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){ e.preventD
jQueryのlive関数を使ってAjaxで取得したコンテンツにイベントハンドラを登録する
jQueryのlive関数について紹介します。 live関数の使用例として、コンテンツの折りたたみをサンプルに用います。 １．コンテンツの折りたたみ h3要素をクリックしたときに、h3要素の次にあるul要素全体を折りたたむには、次のようなjQueryのコードを記述します。実際の動作は「サンプル1」のリンク先で確認できます。 サンプル1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(function() { $("h3").click(function() { $(this).next().slideToggle(0); }); }); </script> <h3>最近のブログ記事</h3> <ul> <li>モバイルサイトオープン</li>
PHP Contact Form: Create Forms Using HTML & PHP - 1stWebDesigner
Are you ready? Let’s get started! Many WordPress plugins come with fully functional contact forms that can be installed and used right away, but we believe in beautiful design and in your right to style it however you choose. Therefore the first video will focus on how to create, but mainly how to style, your contact form using CSS3. Your Designer Toolbox Unlimited Downloads: 500,000+ Web Template
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ajax Style Loading Animation in CSS3 ( no Images ) | Nikesh Hayaran's Blog