コールバック関数が動かない
- Ajaxを用いてサーバ通信を行っている際に、コールバック関数が正常に動作しない状況です。
- JavascriptやjQueryが理解できないため、エラーの原因や解決策が分からない状態です。
- 該当のコードをFireBugで確認しても特に問題はないように見えますが、問題のある箇所を特定することができません。
- ベストアンサー
コールバック関数が動かない
Ajaxでサーバ通信を試みています。 Javaは少しわかるんですが、JvascriptやjQueryはサッパリちんぷんかんぷんな状態です。 今、ボタンクリックで「doAction()」を呼んで、Javaのクラス「/greetinglist」に キーワード「id」を渡して検索結果を受け取って表示しようとしています。 function doAction() は働いて、Java側の検索もできてるんですけど、そこで終了してしまいます。 コールバック関数「function callback(resp)」が動いてくれません。 FireBugで動きを追っていますが、特にエラーはないようです。 「function doAction()」 はjQueryを使っていますが、「function callback(resp)」はJavaScript だという認識です。 <script type="text/javascript" src="js/datastore.js"></script> <script src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> //<![CDATA[ function doAction(){ var id = $('#month').val(); console.log("id==========" + id); $.getJSON('/greetinglist',{id:id},callback,"json"); } function callback(resp){ var json = eval(request.responseText); var res = ''; for (var i = 0;i < json.length;i++){ res += '<td>' + json[i].month + '</td>' + '<td>' + json[i].tenDays + '</td>' + '<td>' + json[i].greeting + '</td>' + '<td><a href="greetingdetail.html?id=' + json[i].id + '">詳細</td>'; } var obj = document.getElementById("datatable"); obj.innerHTML ='<tr><td>id</td><td>月</td><td>旬</td><td>文章</td><td>編集</td></tr>' + res; console.log("res==========" + res); }
- panasobi
- お礼率56% (41/73)
- JavaScript
- 回答数8
- ありがとう数7
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
概ね理解できました。 おそらく問題はjavascriptではなく、サーバー側のjavaにあると思います。 端的に言うと、JSONの書き方が正確ではないことが予想できます。 以下の内容を確認してみてください。 ・JSONのcontent-typeは、"Content-Type: application/json; charset=utf-8"です。 ・文字列は必ず(ダブル)コーテーションで閉じる必要がある。 ・keyの部分は文字列のみ指定できる。 特に2点目の箇所がエラーの原因だと思います。 JAVAのソースを拝見したところ、現在の出力結果は [ { id:value, month:value, tenDayas:value, greeting:value } ] となるようですが、文字列となるkeyが(ダブル)コーテーションで閉じられていないので、 [ { "id":value, "month":value, "tenDayas":value, "greeting":value } ] とする必要があります。 もちろん、値に文字列が入る場合も同様に閉じる必要があります。 従って、現在のajaxの挙動としては、サーバー(java)との通信には成功しているが、JSONとして解析できない(getJSONが処理できない)状況になっていると思われます。
その他の回答 (7)
- tracer
- ベストアンサー率41% (255/621)
ところで、doActionはどこで実行しているんでしょうか？ scriptの全体が見えないと分からない状況になってきました^^; jQueryを使う場合、下記のように書いたほうがよいですね。 <script src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ //ここに処理を書く }); </script> $(function(){})は、jQueryの$.ready関数のショートカットで、この中に記述された内容は、DOMを解析した後に実行されるというものです。おそらくは<head>の中にscriptを書かれていると思われますが、上記の$.ready関数を使わないと、html要素登場以前に記述したスクリプトはDOM解析前に実行されるので、たとえば、$('#month')の要素は取得できないはずです。 ちょっと全体が見えなくなってしまったので、基本的なことを書いてみました。 私が特に分からなかったのは、doActionの実行場所です。
お礼
tracerさん、おはようございます。 tracerさんのご協力には本当に感謝しています。 ありがとうございます。 昨日会社からEclipseの開発環境を持ち帰り、今日は家で作業しています。 EclipseでJavascriptの開発をするもはイマイチですね。 コードを書いているときにはエラーを出してくれませんし、 実行してfirebugで初めてエラーが発見されます。 さて、今回の対象となっているhtmlファイル全文掲示します。 よろしくお願いします。 <?xml version="1.0" encoding="UTF-8""?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <link type="text/css" rel="stylesheet" href="/stylesheets/style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>あいさつ文一覧</title> <script src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> //<![CDATA[ function doAction(){ var month = $('#month').val(); console.log("month==========" + month); //$.getJSON('/greetinglist',{month:month},callback,"json"); $.getJSON('/greetinglist',{month:month},function(request){ console.log("hoge"); console.log(request); }); } /* function callback(request){ console.log("hoge"); var json = eval(request.responseText); console.log("json==========" + json); var res = ''; for (var i = 0;i < json.length;i++){ res += '<td>' + json[i].month + '</td>' + '<td>' + json[i].tenDays + '</td>' + '<td>' + json[i].greeting + '</td>' + '<td><a href="greetingdetail.html?id=' + json[i].id + '">詳細</td>'; } var obj = document.getElementById("datatable"); obj.innerHTML ='<tr><td>id</td><td>月</td><td>旬</td><td>文</td><td>編集</td></tr>' + res; console.log("res==========" + res); } */ //]]> </script> </head> <body> <div id="all_border"> <div id="all"> <div id="container"> <div id="header"> <p class="login"> <a href="/logout">Logout </a> </p> </div><!--headerの終了 --> <div id="content"> <h2>あいさつ文一覧</h2> <h3>検索条件</h3> <table class="condition"> <tr> <th>月:</th> <td align="left"> <SELECT id="month" > <OPTION value="すべて">すべて</OPTION> <OPTION value="１月">１月</OPTION> <OPTION value="２月">２月</OPTION> <OPTION value="３月">３月</OPTION> <OPTION value="４月">４月</OPTION> <OPTION value="５月">５月</OPTION> <OPTION value="６月">６月</OPTION> <OPTION value="７月">７月</OPTION> <OPTION value="８月">８月</OPTION> <OPTION value="９月">９月</OPTION> <OPTION value="10月">10月</OPTION> <OPTION value="11月">11月</OPTION> <OPTION value="12月">12月</OPTION> </SELECT> </td> </tr> </table> <p class="condition_submit"><input type="button" onclick="doAction();" value="検索"></p> <br /> <br /> <hr /> <table id="datatable" border="1" class="greetinglist"> <!-- ここに検索結果を表示 --> </table> <ul class="navi"> <li><a href="greetingadd.html">あいさつ文登録</a></li> <li><a href="menu.jsp">メニューに戻る</a></li> </ul> </div><!--contentの終了 --> <div id="footer"> </div><!--footerの終了 --> </div><!-- containerの終了 --> </div><!--allの終了 --> </div><!--all_boederの終了 --> </body> </html>
- tracer
- ベストアンサー率41% (255/621)
$.getJSONの第3引数には、名前のない関数も指定できます。 問題の特定にはなりませんが、ひとまずこれで試してみてはどうでしょうか？ $.getJSON('/greetinglist',{month:month},function(request){ console.log("hoge"); console.log(request); } } ちなみに、$.getJSONの第4引数って必要でしたっけ？ また、requestはevalで展開しなくても普通にオブジェクトとして受け取れるはずです。
お礼
tracerさん、こんにちは。 今日もよろしくお願いします。 教えて頂いたように第３引数に関数を入れてみました。 Javascriptはこんなことができるんですね。 以下です。 <script type="text/javascript"> //<![CDATA[ function doAction(){ var month = $('#month').val(); console.log("month==========" + month); //$.getJSON('/greetinglist',{month:month},callbackMailgreetingList,"json"); $.getJSON('/greetinglist',{month:month},function(request){ console.log("hoge"); console.log(request); }); } /* function callbackMailgreetingList(request){ console.log("hoge"); コンソールを見てみると month==========10月 しか表示しません。 console.log("hoge"); console.log(request); この２つが動かなかったということは、その前でJavascriptが終了してしまっている、 ということなんでしょうか。 ここでも、GET処理は完了してレスポンスにはJason形式のデータだセットされています。 ということは、関数は機能しているけど、その中にある２つのconsoleの命令だけが実行されなかった、 ということなんですしょうか。 ますます訳が分からなくなってきました。 第４引数については、たまたま見た資料に書いてあったのですが、なくてもよさそうですね。
- tracer
- ベストアンサー率41% (255/621)
ちなみに、 >ところで、最初に書いたんですが、 >function doAction(){ のところは jQuery で書いています。 >function callback(request) のところは >通常のJavaScript だと思うんですが、この違いが関係してるんでしょうか？ jQueryとはJavaScriptの単なる関数群です。 従って、jQueryという関数を利用してJavaScriptを書いているに過ぎません。 jQueryを使おうが使わまいが、あるいは部分的にjQueryの関数が入ろうが、JavaScriptにとっては何の違いもありません。 つまり、それは問題ではないです。
お礼
tracerさん、おはようございます。 ご親切な対応、本当にありがとうございます。 昨日は用事があったので6時に退社しました。 今日はお友達と買物の約束があったんですけど、キャンセルして休日出勤です。 さて、tracerさんから教えて頂いたようにconsole.log()をいくつか組み込んで プログラムを走らせてみました。 以下の感じです。 <script type="text/javascript"> //<![CDATA[ function doAction(){ var month = $('#month').val(); console.log("month==========" + month); $.getJSON('/greetinglist',{month:month},callback,"json"); } function callback(request){ console.log("hoge"); var json = eval(request.responseText); console.log("json==========" + json); var res = ''; for (var i = 0;i < json.length;i++){ res += '<td>' + json[i].month + '</td>' + '<td>' + json[i].tenDays + '</td>' + '<td>' + json[i].greeting + '</td>' + '<td><a href="greetingdetail.html?id=' + json[i].id + '">詳細</td>'; } var obj = document.getElementById("datatable"); obj.innerHTML ='<tr><td>id</td><td>月</td><td>旬</td><td>あいさつ文</td><td>編集</td></tr>' + res; console.log("res==========" + res); } //]]> </script> プログラムが終了してコンソールに表示されたのは month==========10月 だけでした。 「function callback(request){」の中に仕組んだconsole.log()は１つも表示されませんでした。 ただ、コンソールには ＋ GET http://localhost:8888/greetinglist?month=10%E6%9C%88 と出ていて、左側の「＋」をクリックすると中味が展開されて「レスポンス」のタブでは [{id:61,month:'10月',tenDays:'下旬',greeting:'運動会'},{id:62,month:'10月',tenDays:'中旬',greeting:'これから運動会'},] こんな感じでGETの処理の結果がJavascript側でも認識されているのがわかります。 でも、それでもcallbackは起動していないようです。 JavaScriptと全然関係ないところが問題なんでしょうか？ どこをどう調べたらいいのか、皆目見当がつきません。 よろしくお願い致します。
- tracer
- ベストアンサー率41% (255/621)
まず、デバッグの前提として、console.log()に指定した内容は、firebugのコンソールに表示されます。 console.log('hoge')とすれば、hogeという文字列がコンソールに表示されます。 これを利用して、 ・callback関数の一行にconsole.log('hoge')を置いて、無事hogeが出力されれば、callbackが呼び出されていることがわかります。 ・次に、引数をrequestとした場合は、サーバー側のデータはその引数に代入されるので、 console.log(request)とすれば、サーバーとやりとりした結果を確認できます。 ちなみに、 function callback(request){ var json = eval(request.responseText); var res = ''; とした場合は、request.request.responseTextが実際の欲しいデータになると思います。 ・次に、jsonも同様に、console.log(json)としてみましょう。(連想)配列という形で受け取っているか、あるいは、単なる文字列として受け取っているかも確認できます。
- tracer
- ベストアンサー率41% (255/621)
respの箇所に誤りがあったので、その部分を回答しましたが、それ以前にまずは問題の切り分けをしてみましょう。 「動かない」だけでなく、「どのように動かないか」を調べてください。 ・そもそもcallbackは呼び出されているのか。 ・callbackが呼び出されている場合、respにデータが入っているかどうか。 ・request.responseTextに期待するデータが入っていた場合、evalはテキストデータをjson形式に正常に変換しているか(getJSON使う場合、この処理必要なかった記憶) いずれも、callback内にconsole.log('')を追記すれば確認できると思います。 ちなみに、respを引数にした場合、resp.request.responseTextがデータですよ。
お礼
tracerさん、本当にありがとうございます。 >・そもそもcallbackは呼び出されているのか。 これをどうやって判断すればいいのかわかりませんが、 「function doAction(){」にブレークポイントと立て、 ステップインで追ったところ、 $.getJSON('/greetinglist',{id:id},callback,"json"); は通過しています。「id」にカーソルを当てると「10月」とか表示してくれます。 また、「callback」にカーソルを当てると「callback()request」と表示してくれます。 そして、この時点でEclipse側のコンソールにはヒットしたJson形式のデータ が表示されました。ですので、「id」が渡されてjava側は正常に処理が終わっています。 ところがここでステップインで追っていたのが突然 doAction が終了してしまいます。 どうやらcallback を呼び出していない、というか、呼び出していても起きてこない、 といった感じです。 「function callback(request){」内の変数 jason や res にカーソルと当てても 何も表示されません。 もちろん最後の「console.log("res==========" + res);」 に対しても何も表示されません。 記述は、先にも書きましたように function callback(request){ var json = eval(request.responseText); var res = ''; としています。 ところで、最初に書いたんですが、 function doAction(){ のところは jQuery で書いています。 function callback(request) のところは 通常のJavaScript だと思うんですが、この違いが関係してるんでしょうか？ よろしくおねがいします。
- tracer
- ベストアンサー率41% (255/621)
respはご自身で命名された引数名です。 request.responseTextはjavascriptで指定された変数名です。 ですから、respの中にrequest.responseTextが入ってくるのです。 firebugで確認するべきはrespですよ。
お礼
tracerさん、度々の回答本当にありがとうございます。 つくづく理解が悪いのだなぁ、と落胆しています。 引数 request の中味が request.responseText ですから、 callback の引数には request にする。つまり function callback(request){ var json = eval(request.responseText); var res = ''; でいいわけですよね。 Java側は単にjsonテキストを送り出しているだけでしょうから、 JavaScript 側で受け取るクチ（変数）を用意しておけばいいのですよね。 この辺までは理解できたのですが、 それでもJava側の検索が終了しても、callbackは起動せず、doActionで 終わってしまいます。 なぜなんでしょうか？ 度々で申し訳ありません。よろしくいお願いします。 一昨日から先に進めず困り果てています。
- tracer
- ベストアンサー率41% (255/621)
callbackでrespという引数をとってますが、respはどこで使用するのでしょうか？ また、request.responseTextは、前触れ(代入)もなく突然どこで発生したのでしょうか？ 言語の問題じゃないと思いますよ^^;
お礼
tracerさん、回答ありがとうございました。 そうですよね。この引数の渡し方がわかりません。 この引数にはJava側の検索結果を持ってこなければいけないんでしょうけど、 Javaからもらった変数なんてJavaScriptは理解できませんよね。 Java側の最後の部分を載せます。 String res = "["; if (list != null){ for(BeanGreeting data:list){ res += "{id:" + data.getGreetingId() + ",month:'" + data.getMonth() + "',tenDays:'" + data.getTenDays() + "',greeting:'" + data.getGreeting() + "'},"; } } res += "]"; out.println(res); manager.close(); } } ですから「res」を渡せる方法がわからないのです。 それで、jQueryなりのお決まりの処理があるかと思い、callbackの引数に あてずっぽうにいろいろ入れてみました。resultとか、responsとか・・・ ほんと、もっと勉強しなきゃいけない、と感じています。 よろしくおねがいします。
関連するQ&A
- callback関数が起動しない
新人プログラマーです。 Javascript/PHP/MySQLで検索→リスト表示のプログラムを作っています。 Javascriptの中で、Ajax通信は行うようですが、callバック関数が起動しません。 ブレークポイントを設定しても★★のところで終了してしまい、function callback(request)が 起動しない状態です。 以前も似たようなことがあり（そのときはJASONの形式が不正でうまくcallback関数が起動しなかった）、この掲示板で助けて頂いたのですが、 PHP側を丁寧に見てみましたが、データベースの検索はちゃんとできて、JSONの形式で渡せているようです。 コンソールには [{"id":"1","customerName":"山田 アヤ","category":"果物","jusyo1":"東京都新宿区新宿","latestDate":"2012-12-22","reserveDate":"2012-12-22"},{"id":"2","customerName":"田中 かおる","category":"野菜","jusyo1":"東京都中央区銀座","latestDate":"2012-12-10","reserveDate":"2012-12-31"}] と表示されていますので、JASONは生成されていると判断しました。 なぜcallバック関数が起動しないのか、どなたか教えて下さい。 よろしくおねがいします。 【Javascript側】 // 一覧検索 function doAction(){ var category = $('#category').val(); // Ajax通信 ★★ $.getJSON('code/CustomerList2.php', {"category":category}, callback); } // 一覧表示用callback関数 function callback(request){ console.log(request); var json = eval(request); var res = ''; for (var i = 0; i < json.length; i++){ res += '<tr>' + '<td>' + json[i].customerName + '</td>' + '<td align="center">' + json[i].category + '</td>' + '<td>' + json[i].jusyo1 + '</td>' + '<td align="center">' + json[i].latestDate + '</td>' + '<td align="center">' + json[i].reserveDate + '</td>' + '<td align="center"><a href="customerdetail.html?id=' + json[i].id + '">詳細</td>' + '</tr>'; } var obj = document.getElementById("datatable"); obj.innerHTML ='<tr><td>お客様名</td><td>分類</td><td>住所１</td><td>最終来店日</td><td>ご予約日</td><td>詳細</td></tr>' + res; } //--> 【PHP側】 if ($category == 'すべて'){ $sql = "SELECT * FROM tbl_customer" ; }else{ $sql = "SELECT * FROM tbl_customer WHERE category = '" .$category. "'"; } $res = mysql_query($sql, $conn); print "res==="."$res<br />"; $result = "["; while($row = mysql_fetch_array($res)){ $result = $result. "{\"id\":\"" .$row["customerId"]. "\",\"customerName\":\"" .$row["customerName"]. "\",\"category\":\"" .$row["category"]. "\",\"jusyo1\":\"" .$row["jusyo1"]. "\",\"latestDate\":\"" .$row["latestDate"]. "\",\"reserveDate\":\"" .$row["reserveDate"]. "\"},"; } print "1)result==="."$result<br />"; $len = strlen($result); if($len != 1){ $result = substr($result,0,($len - 1)); // 最後の「,」を切り取る } $result = $result. "]"; print "2)result==="."$result<br />"; // 出力 echo $result; mysql_free_result($res);
- 締切済み
- JavaScript
- テーブル上のチェックボックスにチェックがされない
データベースからメール送信履歴を検索し、結果をリスト表示しようとしています。 Ajax通信をして結果をJsonで受け取っています。 送ったか否かは「sendF」に書かれており、「0」なら未送信、「1」なら送信済みです。 「sendF」が「1」ならチェックボックスにチェックを入れようと思って 以下のコードを書きました。 でも、テーブル上のチェックボックスにはチェックが入りません。 console.logで数値が「1」を確認していますが、表示がされません。 どこが悪いか教えて頂けるとうれしいです。 よろしくお願いします。 $.ajax({ type: "POST", url: "../SendList.php", data: {"condition":condition}, // Webサーバに送信するデータ dataType: 'text', // Webサーバか受信するデータの形式 success: function(request){ // ajax通信が成功したときの処理 var json = JSON.parse(request); var res = ''; for (var i = 0; i < json.length; i++){ res += '<tr>' + '<td style="text-align: center;">' + json[i].personId + '</td>' + '<td style="text-align: center;">' + json[i].personName + '</td>' + '<td style="text-align: center;">' + '<input type="checkbox" id="sendF[' + i + ']" name="sendF" />' + '</td >' + '<td style="text-align: left;>' + '<input type="text" id="memo" name="memo" value="' + json[i].memo + '" />' + '</td >' + '</tr>'; if(json[i].sendF == 1){ $('#sendF[' + i + ']').prop('checked', true); console.log("１でした"); } } var obj = document.getElementById("datatable"); obj.innerHTML ='<tr><th>担当者ID</th><th>担当者名</th><th>送信F</th><th>メモ</th></tr>' + res; }, error: function(msg){ // ajax通信が失敗したときの処理 alert( "Data Saved: " + msg ); } });
- ベストアンサー
- JavaScript
- Googlemapb api 複数のマーカー表示に
基礎的なことかもしれませんが、結構調べたりしても分からなかったので、教えてほしいです。 Googlemap api を使った複数のマーカー表示を$getJSON（jQuery)を使用しようして表示させたいのですが、表示できません。 どこがおかしいか教えてください。 【HTML】 1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>map</title> 6.<style type="text/css"> 7.html,body,#map { 8.height: 100%; 9.} 10.</style> 11.</head> 12.<body> 13.<div id="map"></div> 14.<script type="text/javascript" src="map.js"></script> 15.<script type="text/javascript" src="jquery-3.6.0.min.js"></script> 16.<script async defer 17.src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"> 18.</script> 19.</body> 20.</html> 【JavaScript】 1.var map; 2.var marker = []; 3.var data = []; 4.var center = {lat: 36.72073,lng: 137.27112}; 5.function initMap() {//地図の作成 6.map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む 7. center: center,// 地図の中心を指定 8. zoom: 15 // 地図のズームを指定 9. }); 10. $.getJSON("aaaaa.json", function(json){ 11. for (var i = 0; i <= json.length-1; i++) { 12. data.push( 13. { 14. 'name': json[i].name, 15. 'lat': json[i].lat, 16. 'lng': json[i].lng 17 }); 18 }; 19. for (var i = 0; i < data.length; i++) { 20. markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 21. marker[i] = new google.maps.Marker({ //マーカーの追加 22. position: markerLatLng,//マーカーを立てる位置を指定 23. map: map//マーカーをたてる地図を指定 24. }); 25. } 26 });//jsonの閉じ 27.} 【JSON】 [ { "name": "名古屋駅", "lat": 35.170897, "lng": 136.881558 }, { "name": "大名古屋ビルヂング", "lat": 35.172311, "lng": 136.884568 }, { "name": "国際センター駅", "lat": 35.172038, "lng": 136.887701 } ]
- ベストアンサー
- JavaScript
- なぜ、この場面で、ループ関数が必要なのでしょうか！
プログラムレベルは下の下です。 以下のＨＰはhtmlとphpプログラムのコラボレです。 "表示"タグをクリックすれば、 "Google" "Yahoo" " CBS News" "abc NEws" のタグが出てきて、クリックすれば、ホームページが見れるという 単純なHPです。 そこで、分からに事があります。 sample6.htmlの中に"for"関数がありますが、ループ関数が使われています。 このプログラムのからくりを勉強中ですが、現在ループでつまづいています。_ _ なぜ、この場面で、ループ関数が必要なのでしょうか！？ 以下プログラムです、宜しくお願いします。 ファイル名：sample6.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>配列とJSON</title> <script type="text/javascript" src="../lib/jquery-1.8.1.min.js"></script> <script type="text/javascript"> $(function (){ $("#exe").click(hello); }); function hello(){ $.get("sample6.php", {}, function(resp){ var json = eval(resp); var tags = ""; for (var i = 0; i < json.length; i++) { if(i==0){ tags +="<div>サーチ&ポータル</div>"; }else if(i==2){ tags +="<br/><div>USニュースサイト </div>"; } tags += '<a href="' + json[i].url + ' "> ' + json[i].name + '</a><br/>'; } $("#show").html(tags); }); ;} </script> </head> <body> <h2>配列、連想配列とJSON <input type="button" id="exe" value="表示 "/><h2> <p id="show"></p> </body> </html> ファイル名：sample6.php <?php $arr[0]["name"] = "Google"; $arr[0]["url"] = "http://www.google.co.jp/"; $arr[1]["name"] ="Yahoo!"; $arr[1]["url"] = "http://www.yahoo.co.jp/"; $arr[2]["name"] = "CBS News"; $arr[2]["url"] = "http://www.cbsnews.com/"; $arr[3]["name"] ="abc News"; $arr[3]["url" ]= "http://abcnews.go.com/"; header("Content-Type: text/javascript; charset=utf-8"); echo json_encode($arr); ?>
- ベストアンサー
- JavaScript
- Jsonpのコールバック関数に内に引数を渡すには？
APIで返されたJsonpコールバック関数に引数を渡したいのですが、やり方が判りません。 それともそもそも、間違っていて １．引数を渡さない ２．コールバック関数内のデータを一旦変数にいれてコールバック関数内から取り出す。 ３． ２で取り出したコールバック関数内のデータと１で渡そうとしていた引数を使う。 とやったほうがいいのでしょうか。 当方経験が浅いためよくわかっていません。基本的な間違いの可能性が高いと思います。 識者の方ご教授下さい。お願いします。 function start(){ var str = "渡したい引数"; var param = new Object(); param.keyword = '東京'; param.inputcharset = 'utf8'; param.outputcharset = 'utf8'; param.format = 'jsonp'; param.callback = 'jsonp4travelAPI'; var url = 'http://api.4travel.jp/Ver1/SearchAlbum.php?'+obj2query( param ); // script 要素の発行//ここでAPIへリクエストを送る。 var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = url; document.body.appendChild( script ); } // 4travel検索終了後のコールバック関数 function jsonp4travelAPI ( data ) { // データが取得できているかチェック // //ここに渡したい引数も持ってきたい。でも str is not definedになります。 alert(str); } // オブジェクトからクエリー文字列を生成する関数 function obj2query ( obj ) { var list = []; for( var key in obj ) { var k = encodeURIComponent(key); var v = encodeURIComponent(obj[key]); list[list.length] = k+'='+v; } var query = list.join( '&' ); return query; } window.onload =start;
- ベストアンサー
- JavaScript
- GoogleMpsAPIのjson.jsによる読み込み
GoogleMapsAPIの勉強をしています、プログラミング初心者です。 「GoogleMapsAPI徹底活用ガイド」という解説本を参考にしています。 中心位置情報をJSON形式で別ファイルに記述したものをjavascriptプログラムで読み込み、実行、googlemapに反映させたいのですが、うまくいきません。 JSON in JavaScript のページ（http://www.json.org/js.html）のリンクからJSON処理ライブラリjson.jsのスクリプトをコピー、私のサーバー内に保存し、 <head></head>内で <script type="text/javascript" src="json.js" charset="utf-8"></script> とsrc属性にjson.jsを指定、 javascriptのfunciton {}内で、 GDownloadUrl( "center.json", mySetCenter ); function mySetCenter(data) { var obj = data.parseJSON(); map.setCenter( new GLatLng(obj.lat, obj.lng), obj.zoom ); } としています。 center.jsonというのが、JSON形式の位置情報ファイルです。 解説本のサンプルを使用しているので、スクリプトの間違いではないと思います。 json.jsを使わず、javascriptでeval関数を使う場合は、正常にJSON形式の中心位置情報のデータが読み込まれ、地図が表示されます。 おそらく、json.jsのダウンロード方法やサーバへの配置方法などが間違っているではないかと思いますが、参考になる資料がなく困っています。 どなたかご教授お願いいたします。
- 締切済み
- JavaScript
- jQuery コールバック関数について
jQueryの勉強をしています。 コールバック関数というところで、下のようなソースがあるのですが、iとoriginalがどうして取得できているのかが分かりません。 <script> $(document).ready(function(){ $("#btn").click(function(){ $("#test").text(function(i,original){ return "旧: " + original + "／新: 文字が変わりました！ (index: " + i + ")"; }); }); }); </script> </head> <body> <p id="test">文字が変わります</p> <button id="btn">旧/新 テキスト表示</button> </body> 教えていただけないでしょうか？ 宜しくお願いします。
- ベストアンサー
- JavaScript
- $.getJSONにJSON.stringifyを
$.getJSONに、JSON.stringifyした結果を指定したいのですが、どうすればよいでしょうか？ ■現状 ・コンソールにJSONは出力されているのですが、$.getJSONでこのファイルを指定しても、画面真っ白です ▼index.html <script type="text/javascript" src="hoge.json"></script> <script type="text/javascript"> $.getJSON('hoge.json', function(data) { ▼hoge.json var obj =([ [略], ]); var json_text = JSON.stringify(obj); // テスト出力 console.log(json_text); ■質問 ・$.getJSONにこの出力結果(json_text)を指定するためには、どうすれば良いでしょうか？ ・一旦ファイル出力しなければいけないのでしょうか？ ・どうやるのでしょうか？ ・AJAXでサーバ側へデータを渡してファイル出力した後、$.getJSONでその出力したファイルを指定するしかない？
- ベストアンサー
- JavaScript
- ajax通信の戻り値が空になる。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.xdomainajax.js"></script> <!-- 追加 --> <script type="text/javascript"> $.ajax( { url: URL, type: 'GET', cache: false, dataType: 'xml' } ) .done(function(res) { console.log(res); } ) .fail(function(res) { console.log('FAIL') } ); </script> </head> 上記のコードの通り（url部分は明記を省略）、jquery.xdomainajax.jsを用いたajax通信を行いたいのですが、通信は成功しているもののコンソールを見ると以下のようになっています。 Object { query: Object, results: Array[0] } 本来ならresultsの部分に返り値が格納されるのですが、空になってしまいます。 なにか原因があればご教授頂きたいです。よろしくお願い致します。
- 締切済み
- AJAX
- jQueryで質問です。
jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。
- ベストアンサー
- JavaScript
お礼
tracerさん、こんにちは。 10日間もほっておいて申し訳ありませんでした。 tracerさんのおかげで昨日ようやく解決することができました。 本当にありがとうございました。 ちょっとご説明します。 先々週の日曜日、家に環境を持ち帰って再度試したところ、 家ではエラーが出なかったんです。 環境が原因かと思い調べたところ、家でエラーが出なかったのは ヒット件数が0件だったからで、検索に引っかかった場合はやはりエラー が出ました。 tracerさんのご指摘どおりデータの問題またはJava側の問題ではないかと 想像できるようになりました。 ところで、このアプリはAppEngine上で動くものなんですが、現状では Javascriptを使って動いているもんなんです。 Javascriptでは動いていて、jQueryでは動かない。 このことにとらわれてしまい、こんなに時間がかかってしまいました。 また別のプログラムではほぼ同じ構文がjQueryを使って動いていたんですけど、 バージョンが1.3.2でした。このこともわたしを混乱させる原因となりました。 結果から申し上げるとServlet側を、ヒットしたデータをダブルコーテーション でくくることによって解決することができました。 シングルコーテーションでくくった場合、Javascriptは認識するのですが、 Jsonとしては認識しないということがわかりました。 まさにtracerさんが指摘した通りのことでした。 tracerさんの指摘どおりにの対応を直ぐしていれば10日前には終わっていた のに、ああでもない、こうでもないと勝手に考え、調べて行くうちにどんどん 変な方に行ってしまいました。 途中で放り出そうかと思ったんですけど、昨日再度やり直し、 ダブルコーテーションでくくったリテラルデータを作って渡してみたところ スンナリ通ってしまいました。 昨日は母が作ってくれた鍋物にチューハイで一人乾杯しました。 tracerさんには何とお礼を言ってよいやら。 本当に本当にありがとうございました。