JQueryでAjaxを行うときに、Ajaxが使える状態にあるかどうかを調べる方法についてです。
プログラムから離れている期間が長かった後、久しぶりにAjax関係に触れてみたら、Ajaxが動かずに苦労することがあったのでチェック方法をまとめてみました。
まず JQuery が正常に動いているかの確認です。
下記のようなコードで設定できます。バージョンは自分の使いたいバージョンに値を変更してください。
JQueryの動作チェック
まず、JQueryをインポートします。
|
0 1 2 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
次に、リンクをクリックすると新しいページでウェブが開かれるというコードを記載してみます。
HTML
|
0 1 2 |
<a href="http://google.com">Google</a> |
JQuery
|
0 1 2 3 4 5 6 |
<script type="text/javascript"> $(function(){ $("a[href^='http://']").attr("target","_blank"); }); </script> |
これでリンクをクリックしてブラウザの新しいページ（タブ）でGoogleのページが開かれたら、JQueryは正常に動いています。
Ajaxの動作チェック
次に下記のコードをページのヘッダ部分に記載してください。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $.ajax({ success : function(response){ alert('成功'); }, error: function(){ //通信失敗時の処 alert('通信失敗'); } }); </script> |
ソースの記載後にページにアクセスしたら
このような画面が出れば、Ajax通信は行われています。
作っておいたソースをコピペして使うときに、前のサイトでは動いていたのが、今回は動かない！なんていう時は、環境がうまく整っていないこともあるので、環境が整っているかをチェックしましょう。
