JavaScriptを学習中のものです。
ボタンを押した際にサーバと通信を行い、返ってきた値を表示するというものを作成しています。
htmlの中にajaxの処理を書きたくなく、index.htmlの<script>内に以下のように記述しています。
index.html
HTML
1 $('#ボタン').click(function () { 2 result = 通信処理.Connection(); 3 var id = result.id; 4 5 $('#変更したい').text(id); 6 });
connection.js
Javascript
1 通信処理.Connection = function() 2 { 3 return Connection(); 4 }; 5 6 // 通信 7 var Connection = function() 8 { 9 $.ajax({ 10 type: 'POST', 11 url: 通信先URL, 12 data: 送信するデータ, 13 dataType: 'json', 14 // async: false, 15 }).done(function(data) { 16 console.log('成功したとき'); 17 result = data; 18 }).fail(function(data) { 19 console.log('失敗したとき'); 20 result = data; 21 }); 22 return result; 23 24 };
としています。
しかし通信ボタンを押した時点でHTMLの var id = result.id; に処理が到達してしまい、
id is undefinedとエラーになってしまいます。ajaxが非同期通信なので当然ではあるのですが、
通信が終わり、データがサーバから帰ってきたらhtmlの表示の切り替えを行いたいです。
また、htmlに直接ajax処理を記述し、doneまたはfailの中に$('#変更したい').text(id);とすると期待する動作にはなりますが、
この記述をやめて通信処理は別ファイルで共通処理として管理したく思います。
その際にコールバック関数を使うとありますが、具体的にこの場合はどのように処理すればよいのかイマイチピンと来ずにいます。
asyncをfalseとすれば同期通信となるという情報を見つけたのですが、こちらは非推奨かつajaxを使っているのであれば
非同期通信のままかっこよく実装できれば・・・と考えています。
皆さんのお知恵をお借りできればと思います。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/27 02:21