関数の中の値を取り出す方法

このQ&Aのポイント
  • prototype.jsを使用してデータを送信し、onCompleteの関数内で値を取得する方法を教えてください。
  • Ajaxリクエストでデータを取得し、onComplete内のret変数に値を代入するが、表示されない問題への対処方法を教えてください。
  • get_data関数内で、Ajaxリクエストを使ってデータを取得し、取得した値をalertで表示する方法を教えてください。
回答を見る
  • ベストアンサー

関数の中の値を取り出したい

prototype.jsを使って送信して返ってくるデータを、 onCompleteの関数の中で「ret」に値を入れてると思うのですが、 出ててきたときにはalertで表示されません。 どうすればこの形でその関数の中の値を取り出すことができるのでしょうか? function get_data() { ret = ""; new Ajax.Request( "test.php", { method: "get", parameters: "test=aaa", onComplete: function(httpObj){ ret = httpObj.responseText; } } ); alert(ret); return ret; }

質問者が選んだベストアンサー

  • ベストアンサー
  • mahny
  • ベストアンサー率74% (57/77)
回答No.1

確かAjax.Request()はデフォルトで非同期通信なので、 そのままではonComplete に指定した関数を実行する前に alert(ret); return ret; が実行されてしまいます。 asynchronous: false オプションを追加してやればokです。 オプションの詳細なんかは参考URLでどぞ。

参考URL:
http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html
takagoo100
質問者

お礼

ご返答ありがとうございます。 なるほど、非同期から同期にするってことですね。 ただ非同期と同期の概念をまだあまり理解してないので これからいろいろ試してみたいと思います。

関連するQ&A

  • ロード後にイベントをセットしたい

    初めからタグに埋め込まないで、ロード後にイベントをセットしたいと思い、 データを送信してからonCompleteの関数の中に記述しました。 ちゃんとonCompleteの中に来ていることは確認できたのですが、 idがtestのタグをクリックしても反応がありません。 以下のプログラムのどこがいけないのでしょうか? <script type="text/javascript" src="prototype.js"></script> function post_data() { new Ajax.Request( "test.php", { method: "get", parameters: "test=aa", onComplete: function(httpObj){ var obj = document.getElementById("test"); obj.onClick = sample; } } ); } function sample() { alert("aa"); } window.onload = function() { post_data(); } <a href="" id="test">test</a>

  • 無名関数内の変数のreturn

    function get_record(id,step,exefunc) { httpObj = new XMLHttpRequest(); ...XMLHttpRequest非同期通信  httpObj.onreadystatechange = function() { if(httpObj.readyState == 4) && (httpObj,status == 200) { data = httpObj.responseText; exefunc(data); }}} 上記関数でデータを1件取得します。 質問は2つあって、今はhttpObj.responseTextをexefunc関数の引数として渡して、responseTextを処理しています。 httpObj.responseTextをexefunc関数で処理するのではなくて、returnしたいのですが、どうすればよいかわかりません。無名関数の中にあるので、dataをreturnしても、外からは参照できないのです。 もう一つの問題は、get_record関数を呼び出す関数は2つあって、その2つを同時にwindow.onloadで実行したいのです。 get_recordでデータを取得、そのデータを表示するための関数disp1,disp2(表示場所が違うため2つにわけています)をwindow.loadで実行したいのですが、後に記述されたほうしか実行されません。 どうすれば2つがwindow.onloadで実行できるでしょうか。 足りない情報等あれば教えてください。 よろしくお願いします。

  • [prototype.js] Ajax.Requestの取得データをコールバック関数外で取得する方法

    下記のコードを実行すると、 'undefined' 'hello' と表示されます。 (A)の箇所でグローバル変数gTestに'hello'が格納されている事を期待するのですが、undefinedとなります。 どういった理由でこうなるのでしょうか? また、onCompleteで定義した処理内で、 値をグローバル変数に格納するにはどのような方法がありますか? 何卒よろしくお願い致します。 -- <script src="/js/prototype.js" type="text/javascript"></script> <script type="text/javascript"> var gTest; function load() { new Ajax.Request('http://~/', { method: 'get', onComplete: displayData }); alert(gTest); //(A)undefinedと表示 } function displayData(httpObj) { gTest = 'hello'; alert(gTest); //(B)helloと表示 } load(); </script> --

  • Ajaxのエンコードで

    私はshift_JISで作成したCGIのページがあるのですが、 Ajaxを導入しようとしたときに、Ajaxというか Javascriptでは、utf-8しか認識しないととあるサイトに書いてあったのですが、 そのCGIのページをphpに変更するにはものすごく多大な時間が 必要になってしまうんですが、CGIをutf-8仕様にするのも大変です AjaxでShift_JISに変換するような事はできませんでしょうか? http://javascriptist.net/ref_prototype/ajax.periodicalupdater.html のサイトに乗っている <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> var myajax; function execute() { myajax = new Ajax.PeriodicalUpdater( "container", "./member.cgi", { "method": "get", "parameters": "id=$id", frequency: 5, // 5秒ごとに実行 onSuccess: function(request) { // 成功時の処理を記述 // alert('成功しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); // ↓IEでもキャッシュを読み込まずに毎回リモート接続を実行するためのコード(パラメータの書き換え) var str = myajax.options.parameters; var hash = str.parseQuery(); hash["ajax_request_id"] = Math.random(); hash = $H(hash); myajax.options.parameters = hash.toQueryString(); }, onComplete: function(request) { // 完了時の処理を記述 // alert('読み込みが完了しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> を使用して自動更新をしようと思っているのですが

  • proototype.jsでのデータ取得について

    prototype.jsを使っております。 下記のようなコードでsetFeed.phpよりデータを取得しているのですが、allTextに代入しています。 これをdisplayData外で扱うにはどうしたらいいでしょうか? 特別なreturnの仕方があるのでしょうか? 解決法お教え頂ければ、幸いです。 new Ajax.Request('setFeed.php', { method: 'get', onComplete: displayData }); function displayData(responseHttpObj) { allText = responseHttpObj.responseText; }

  • 無名関数内の変数のreturn

    httpObj.onreadystatechange = function() { if ((httpObj.readyState == 4) && (httpObj.status == 200)) { var data = httpObj.responseText.split(","); Ajaxで非同期通信をしています。 ステータスチェックをして、respinseTextを受け取るのですが、この変数dataをどうしてもreturnしたいのです。 このままだと、当然ローカル変数なのでreturnできません。 前に同じ質問をして、同期通信にすればよいのでは?とアドバイスをいただいたのですが、今回はどうしても非同期通信を行いたいのです。 変数varをそのまま別の関数の引数にする、という方法では解決できずに困っております。 何かよい方法があれば、アドバイスをお願いします。

  • 【Ajax】SHIFT-JISの文字化け 

    AjaxのSHIFT-JIS文字化けで悩んでいます。 下記コードです。※prototype.js使用※ <html> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <title>Sample</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"><!-- function loadHTMLFile(fName) { new Ajax.Request(fName, { method: "get", onComplete: displayData }); } function displayData(httpObj){ alert(httpObj); $("result").innerHTML =httpObj.responseText; } // --></script> </head> <body> <h1>サーバー上のHTMLファイルを読み込む</h1> <form> <input type="button" value="●●.htmlファイルを読み込み" onClick="loadHTMLFile('●●.html')"> </form> <div id="result"></div> </body> </html> ●●.htmlおよび、このコードを記述しているファイルのエンコードは "SHIFT-JIS"です。 ●●.htmlのエンコードを"UTF-8"にするとうまく表示できます。 "SHIFT-JIS"同士のやり取りの方法を教えて頂きたく思います。 宜しくお願い致します。 ※サーバはwindow用XAMPを自分のローカルに使用しています。  アパッチの設定はいじっていません。

  • JSONのデータから商品名の取得の仕方

    今現在下記の記述でJSONを取得しています。 ===== <html> <head> <title>JSONのデータを使ってみる</title> </head> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> function execute() { var url = './ItemSearch_json.php'; var paramList = "keyword=" + encodeURIComponent("ふくろう"); var a = new Ajax.Request( url, { method: 'get', parameters: paramList, onSuccess: function(request) { // alert('読み込み成功しました'); // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onComplete: function(request) { alert('読み込みが完了しました'); $('container').innerHTML = request.responseText; // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> <body> <div id="container">content</div> <button onclick="execute()">サンプル実行</button> </body> </html> ===== このままだと、プレーンテキストは表示されるのですが、商品名や価格の一覧などを選択して表示できません。 evalなどを使うのかなと思うのですが、はっきり分かりません。 ヒントを教えていただけないでしょうか。

    • ベストアンサー
    • AJAX
  • Ajaxで変数が受け取れない

    function chk() { var up_file = false; httpObj = createXMLHttpRequest(displayData); if (httpObj) { httpObj.open("POST","file_chk.php",true); httpObj.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8"); httpObj.send("chk=(ファイル名)"); } function displayData() { if ((httpObj.readyState == 4) && (httpObj.status == 200)) { if (httpObj.responseText == "true") { up_file = true; } } } alert(up_file); } } 以上のようなソースのJavaScriptプログラムがあります。Ajaxを使ったもので、phpのプログラムでファイルの有無を調べるというものです。 まず最初に有無の確認用の変数up_fileを設定し、phpを使ったAjaxで検査、Ajaxが作動すると関数displayData()が実行され、ファイルがあればup_fileの値を初期値falseからtrueへ上書きするというものです。 ところがファイルがちゃんとあるのにup_fileの中身はflaseのままなのです。ソースにalertを書いた場所でfalseが返ってきます。その前のスコープ内に入れると、Ajaxで問い合わせるので数回falseが出た後最終的にtrueになります。なのにその1つ後のスコープ内、つまり関数displayData()を抜けた大元の関数chk()内に置くとfalseになってしまうのです。trueにする時varを使ってないのでグローバル変数の書き換えすら可能なはずなのですが・・・。 なぜ変数up_fileの上書きが出来ないのでしょうか?

  • ajaxでエラー処理

    お世話になります。 prototype.jsを使ってajaxのエラー処理を考えております。 そこで質問なのですが、以下のソースで OK.phpでは正常に処理が行われ、 NG.phpでは強制的にonFailure処理を行わせたいと考えております。 PHP側(NG.php)で、操作出来ませんでしょうか? よろしくお願いいたします。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function ajax(fName) { var filename = fName + "?cache="+(new Date()).getTime(); new Ajax.Request(filename, { method: "get", onSuccess: displayData, onFailure: displayError }); } function displayData(httpObj) { $("result").innerHTML = httpObj.responseText; } function displayError(httpObj) { $("errMsg").innerHTML = httpObj.responseText; } // --> </script> </head> <body> <input type="button" value="正常処理" onClick="ajax('OK.php')"><br> <input type="button" value="エラー処理" onClick="ajax('NG.php')"><br> <div id="result"></div> <div id="errMsg"></div> </body> </html>

専門家に質問してみよう