Javascript初級者です。
Ajaxを使ってデータの重複チェックを行おうとしました。
ところがAjaxがヘンな動きをするんです。
以下のコードなんですが、上の登録処理の中で、function doubleCheck を呼んで
います。
問題は2つあって、ひとつは実際に重複していてもしていなくても「true」を
返してくることです。
console.log("res=========" + res) には「yes」とか「no」とか重複有り無しで
異なりますが、ちゃんとそれぞれセットするにも関わらず、
if(!doubleCheck() では必ず「false」が戻ってきてしまいます。
もう一つおかしい点は、重複検索(これはPHPでやってます)の最中にもかかわらず、
「true」が返ってきて
"重複があったので登録できません。"
お、出てしまうことです。
それで調査するために console.logその2を入れてみました(※※※のところ)。
ところがこの console 何も吐き出しません。
ということは doubleCheck() の最後の if文にたどり着いていない、または
途中でエラーになっているのかもしれません。
私の書いた Ajax のコードがおかしいんでしょうか。
どなたか御指導下さい。
よろしくお願いします。
// 追加登録処理
function doActionAdd(){
if(dataCheck()){
// customerId が 空白か否かのチェック
if($('#customerId').val() == ""){
if(window.confirm("追加登録していいですか?")){
if(!doubleCheck()){
window.alert("重複はありませんでした");
}else{
window.alert("重複があったので登録できません。");
}
(以下略)
function doubleCheck(){
var yomi = $('#customerYomi').val();
var res = '';
// 重複チェック
$.ajax({
type: "POST",
url: "../customer/CustomerDoubleCheck.php",
data: {"customerYomi":yomi},
dataType: 'text',
// ajax通信が成功したときの処理
success: function(request){
console.log("request=========" + request);
var json = JSON.parse(request);
console.log(json[0].result );
res = json[0].result;
console.log("res=========" + res);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
$('div#jobStatus').text("重複チェック検索ができませんでした。");
return false;
}
});
console.log("resその2=========" + res); //※※※
if(res == "yes"){
// 重複していたので「false」を返す。
return false;
}else{
// 重複していなかったので「true」を返す。
return true;
}
}
No.2ベストアンサー
- 回答日時:
ご提示の無い部分がどうなっているのか不明なのと、インデントがないので、私が読み間違えているかもしれませんが…
>ひとつは実際に重複していてもしていなくても「true」を返してくることです。
phpからの送信を受信するまでにタイムラグがありますが、ajaxは非同期通信ですので、スクリプト側はそれを待たずに処理を続けます。
(受信後の処理はcallbackで処理されます)
このあたりの順序を再確認してください。
ご提示の、doubleCheck()では送信後に続けてif(res == "yes")を判定しているので、resの値は「''」ですから結果としてほぼ確実にtrueを返します。
>もう一つおかしい点は、重複検索(これはPHPでやってます)の最中にもかかわらず、「true」が返ってきて
上にも書きましたが、非同期通信なので処理はphpの返信を待ちません。
返信を待って処理を続けたいのであれば、同期通信を利用なさればよろしいでしょう。
(多分jQueryと推測して)送信時に async:false を指定すれば同期通信になるはずです。
http://api.jquery.com/jQuery.ajax/
>console.logその2を入れてみました。ところがこの console 何も吐き出しません
何も吐き出さないのが真実なら、ご推測のように途中でエラーになっている可能性がありますが、それは上記の「trueが返される」と矛盾していませんか?
「何も吐き出されない」のではなく、「resその2=========」が出力されているのではないかと推測します。
(res=''の状態なので、この結果となる)
といったあたりではないかと、想像しますが…
とても早い回答ありがとうございました。
非同期通信ではこういったことに十分注意しなければいけないんですね。
asyncオプションの使い方をもう少し具体的に教えて頂けないでしょうか。
よろしくお願いたします。
No.3
- 回答日時:
ANo2です。
>asyncオプションの使い方をもう少し具体的に教えて頂けないでしょうか。
スマホからなので、簡単に。
回答に付けてあるリンク先をご覧ください。
jQueryのオフィシャルサイトのドキュメンテーションですので、一番確かな説明と言えるでしょう。
(私はあまりよくは知らないので、いい加減な説明しかできません。)
度々の回答ありがとうございました。
教えて頂いたサイトを見て勉強します。
ただサイトは英語なので・・
中学でもっと英語勉強しておけばよかった・・
No.1
- 回答日時:
Ajaxの仕組みを理解されていないようです。
AjaxのAはAsyncronous=非同期のこと。
HTTP によるデータ取得にはある程度時間がかかりますが、
通常のAjax処理では「まずデータ取得のリクエストを出す」「リクエストを出したら、続きの処理を実行する」「データ取得が出来たら、改めて受取処理を実行する」という流れになります。
success: に指定した関数部分が、この受取処理です。
というわけで、$.ajax を呼び出した直後の時点では、データの取得はまだできていません。取得出来ていない状況のまま続きを実行することになり、変数 res の内容をチェックしていますが、そのチェックを行っている時点ではまだsuccess指定の関数は呼び出されておらず、変数resへの代入はできていないのです。
ですので、doubleCheck の呼び出し以降の
---
if(!doubleCheck()){
window.alert("重複はありませんでした");
}else{
window.alert("重複があったので登録できません。");
}
(以下略)
---
これらの記述は、$.ajax の complete で処理を指定するのが、正しい Ajax の書き方です。
その対応にはそれなりなコード書き換えが必要になりますが、
手軽な方法としては、$.ajax のパラメータに「async:false」を指定するという方法もあります。
その場合、$.ajax 呼び出しは、データ取得が終わってから続きを実行することになりますので、
それだけで質問者さんのコードでそのままで動くでしょう。その代わり、非同期実行しませんので反応が悪くなるなどの弊害が出る場合があります。
http://semooh.jp/jquery/api/ajax/jQuery.ajax/opt …
素早い回答ありがとうございました。
そうですね、Ajaxがよくわかっていないようです。
「非同期」というのは文字ではわかっていても、実際はよく理解できて
いなかったんだと思います。
今までAjaxを使っていた時は気づかなかったんですけど、
というかAjaxに渡した直後に分岐処理をすることがりませんでした。
今回のことを是非習得したいと思いますので、よろしくお願いします。
それで、ひとつは「completeの処理」、もう一つは asyncオプションの
使い方をもう少し具体的に教えて頂けないでしょうか。
度々のお願いで恐縮ですが、よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
PowerPointで時計表示
-
ラベルの色がかわってくれない
-
JavaScriptで初めてOOPを試した...
-
JSPの処理の途中で、JavaScript...
-
アクセスのフォームでタイマー...
-
デザイン時のVisible=Falseは実...
-
VBAについて
-
PowerBuilderのDOUBLEデータ型...
-
VBAでWEBのリンクをクリック...
-
jQueryで行う初期表示処理について
-
VB.netでタイマーがスタートし...
-
VBA 図形を塗りつぶし無しにす...
-
PHPとjquery
-
C#でボタン名を変更しても動く
-
正整数の半角数字かどうか判定する
-
IEで見ると「構文エラー」にな...
-
VB.NETからWEBブラウザの操作に...
-
PDFフォームで条件つき金額を表...
-
文字認証の問題
-
六曜カレンダー
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
〔Excel:VBA〕マクロの実行が異...
-
JSPの処理の途中で、JavaScript...
-
if(1){...}とはどういうことで...
-
デザイン時のVisible=Falseは実...
-
初心者です。gulpでコンパイル...
-
C#でボタン名を変更しても動く
-
PowerPointで時計表示
-
jQuery ui Datepicker 明日以降...
-
1つのVBAコードをすべてのコア...
-
リクエスト結果が一瞬しか表示...
-
Excel VBA にて JavaScript の...
-
VBA ステータスバー DoEvents
-
Excelのマクロ一括実行ができな...
-
VBA SORT Applyでエラー
-
JavaScriptでショートカットキ...
-
innerHTMLなどの反映タイミング
-
既存のwebサイトで、ローカルの...
-
OnTime を使って、分間隔で実行...
-
2回目のSortメソッドが失敗~20...
-
resizeToメソッドが動作しません
おすすめ情報