AJAX
- jquery,ajaxによるphp通信でnull
初めまして。 現在jqueryを勉強中の学生です。 いろいろなサイトを参考にしつつ、試しににjquery・ajaxを使ったphpとの通信を試みているのですが、文字列のやりとりがうまくいきません。 数字ではうまくいくのですが、文字になるとalertの部分でnullと返されてしまいます。 アドバイス等頂ければと思います。 よろしくお願いいたします。 以下部分的ではありますがコードを示します。 (jqueryはjquery-1.11.1.min.jsを使用) [js] $.ajax({ type: "POST", url: "step1.php", data: send_data, success: function(receive_data) { var parseAr = JSON.parse(receive_data); alert(parseAr[0]['name']); }, error: function(XMLHttpRequest, textStatus, errorThrown) {alert('Error: ' + errorThrown); } }); return false; [php側] <?php if(isset($_POST['name'])) { $result = array(); $result[] = array('name'=>'織田', 'age'=>'33'); $result[] = array('name'=>'織田', 'age'=>'33'); echo json_encode($result); } else { echo json_encode('The parameter of "name" is not found.'); } exit; ?>
- 締切済み
- daigaku_tarou
- AJAX
- 回答数1
- cakePHP+Ajax アップロード状況の取得
環境【cakePHP2.5, PHP5.5】 ファイルアップロードの進捗状況を取得してプログレスバーを表示したいのですが、うまくいかず困っております。 現状の方式は以下です(関連部分だけ抜粋) ●cakePHPのViewファイル(アップロードForm) <?php echo $this->Form->create('Model', array('type' => 'file')); ?> //Form作成 <?php echo $this->Form->hidden(ini_get('session.upload_progress.name'), array('value' => 'example')); ?> //PHPのアップロード状況取得設定 <?php echo $this->Form->file('upload_file'); ?> //ファイル選択 <?php echo $this->Form->submit('アップロード', array('div' => false, 'escape' => false));//submit ●Viewファイル内のjavascript(submitイベントを取得してajax通信) $(function() { $('#FormName').submit( function(event) { $.ajax({ url:'/controller/action', success:function (data, textStatus) { $('#progress').html(data); }, error:function (err) { console.log('ajax通信失敗:'+err); }, }); }); }); ●cakePHPのアクション ※アップロード処理は省略 public function action() { if ($this->request->is('ajax')) { //$_SESSIONキーから進捗状況を取得 $key = ini_get("session.upload_progress.prefix").'example'; $data = $_SESSION[$key]; //パーセンテージ計算 $progressData = round(($data["bytes_processed"]/$data["content_length"])*100); //結果表示用の変数に値を入れ、更新用のViewをrender $this->set(compact('progressData')); $this->render('/Elements/ajax/progress','ajax'); } } renderしているエレメントはアップロードViewファイルの中で指定しています。 大きく問題は2つあります。 1 ajax通信が動かない cakePHPのアクションはキックしていますが(ログを吐かせて確認)、errorが返ってきます(errの中身は[ object Object ])。 ただし、submitイベント内ではなく、たとえば<input type=button>のonClickイベント関数の中に入れてやると正常に通信できます。 また、他にも数カ所ajax通信を行っている箇所がありますが、そちらは特に問題なく通信できています なお、ajax通信部分をsetIntervalや関数に入れてSetTimeoutの中に含めると、アクションをキックすらできず何も動かない感じになります(なぜ…) submitとajax通信は同時には出来ないものなのでしょうか? 2 ajax通信から$_SESSIONのupload_progress関連の値が取れない ファイルアップロード中にcakePHPのアクションに普通にアクセス(GET)すると、アップロード状況が取得できるのですが、ajaxからこのアクションにアクセスすると値が取れない($_SESSION内にこのキーと値が存在しない)状態になります。 1の問題と絡んでいるような気もしますが、なぜajax通信のときだけ取得できないのか、原因が分からず困っております。 cakePHPでファイルアップロードの進捗を表示する機能をつくられている方など、なにかヒントを頂ければと思います。 なにとぞよろしくお願いします。
- rightの位置
javascriptでrightの位置を下記のように取得できたのですが これをjQueryを使ってrightの位置の値を取得するようにするにはどのようにスクリプトを組めばいいのでしょうか? 【javascript】 var ele = document.getElementById("crop_img"); var bounds = ele.getBoundingClientRect(); var x1 = bounds.right; 【css】 <style type="text/css"> #crop_img { position: absolute; top:0px; width:100%; } </style> 【HTML】 <div id="crop"> <img src="./test.jpg" id="crop_img" alt=""> </div>
- jQueryにて背景のURLを取得
jQueryにて背景のURLを取得しimgを表示する場合で背景を縦横の倍率を50%に縮小するにはjavascriptをどうすればいいのでしょうか? 【javascript】 jQuery(function($){ var ori_img = $("#crop_img"); crop_window.css({'background-image': 'url('+ori_img.attr('src')+')'}); }); 【HTML部分】 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="crop"> <img src="./test.jpg" id="crop_img" alt="" > <div id="crop_window"></div> </div>
- 親ページの要素をAJAXを使って読み込む
親ページのリンクをクリックして子ページへと遷移する際に子ページ上に親ページの一部の要素を表示したく、下記のような処理を子ページに埋め込みました。 <script type="text/javascript"> $(function(){ $.ajax({ type: 'GET', url: '親ページのrootパス/index.html', dataType: 'html', success: function(data) { $("#tableArea").append($("#table01",data).html()); }, error:function() { alert('Any problem has occured!'); } }); }); </script> テストサーバへアップし、Chromeで動作確認のため、consoleで$("#table01",data).html()の値を表示させると空っぽで何もなく、子ページにも表示されません。 $(data)だけでconsoleに表示させると、親ページのDOMが出力されます。 問題解決方法についてご教授頂けると幸いです。
- Ajaxでのチャットのページ更新方法について
Ajaxなどの技術を使い、1秒毎など定期的に更新するというもの。F5連打と同じだが、ブラウザでページ自体を更新する必要はないため、一見更新しているようには見えない。 ↑ これって、PHPスクリプトの中でどうやって実現できるのでしょうか。 できましたら、PHPの中に埋め込める形でのAjaxを用いたコードを教えていただけると、幸いなのですが。どうぞよろしくお願いします。
- ベストアンサー
- beterugius
- AJAX
- 回答数1
- ajaxでapi
ajaxでapiから値を取得しています。 初心者で申し訳ありませんが、ajaxは非同期の通信を利用しているようですが、 同期かつリフレッシュなしで値を取得できないのでしょうか? よろしくお願いします。 function startWave(){ var arry=["a","b","c"]; for(var i=0;i<arry.length;i++){ dotAjax(arry[i]); } } function dotAjax(str){ $.ajax({ type: 'GET', 略 success:function( aのajax処理が終わったら、bのajax処理を行いたい } } }
- ブラウザ閉じたらサーバー処理はどうなる?
ふと気に合ったのですが、例えばブラウザのボタンを押して無限ループをサーバーで起こさせ、その処理中にブラウザを閉じた場合、サーバーで行われている処理はどうなるのでしょうか? ブラウザが閉じられた場合、「もうその処理はいいよ~」みたいなリクエストがサーバーに送られたりしてストップするのでしょうか? 以上、よろしくお願いします。
- ログイン中のメンバーを表示したい
10人くらいで使うちょっとしたウェブアプリを作っているのですが、 ログインしてるメンバーをリアルタイムで判定するやり方が思いつきません。 ちなみに使ってる言語はhtml,css,php,javascriptです。 表示をリアルタイムに反映させるにはJavascriptでログイン状態の部分を書き換えてればいいと思うのですが、どうやってログイン状態を取得すればよいのでしょう。 色々なやり方があると思うのでヒントをいただけたらと思います。
- ベストアンサー
- poniponi69
- AJAX
- 回答数3
- フォームデータの受取り方
お世話になっております。フォームデータの受取り方が判らず質問させて下さい。 少々長いのですが、以下はPHPで作ったファイルです。 (IDは重なってはならないと考え、変数で番号を与えて回避しています) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="EUC-JP" /> <title></title> <script type="text/javascript" src="/jquery/js/jquery.min.js"></script> </head> <body> <script> $(document).ready(function(){ $('#send1').click(function(){ var data = {comment : $('#comment1').val()}; $.ajax({ type: "POST", url: "send.php", data: data, success: function(data, dataType){ }, error: function(XMLHttpRequest, textStatus, errorThrown){ alert('Error : ' + errorThrown); } }); return false; }); }); </script> <form method="post"> <INPUT type="hidden" name="comment_no" id="comment_no" value="1"><p><textarea name="comment1" id="comment1" style="width:400px; height:20px; padding:6px 5px; font-size:13px; overflow:hidden; vertical-align:text-bottom;" onkeyup="resize(this)"></textarea></p> <p><input id="send1" value="送信1" type="submit" /></p> </form> <hr> <script> $(document).ready(function(){ $('#send2').click(function(){ var data = {comment : $('#comment2').val()}; $.ajax({ type: "POST", url: "send.php", data: data, success: function(data, dataType){ }, error: function(XMLHttpRequest, textStatus, errorThrown){ alert('Error : ' + errorThrown); } }); return false; }); }); </script> <form method="post"> <INPUT type="hidden" name="comment_no" id="comment_no2" value="2"><p><textarea name="comment2" id="comment2" style="width:400px; height:20px; padding:6px 5px; font-size:13px; overflow:hidden; vertical-align:text-bottom;" onkeyup="resize(this)"></textarea></p> <p><input id="send2" value="送信2" type="submit" /></p> </form> </body> </html> ここで質問させて下さい。 上記フォームデータの受取り先である、send.phpは $comment = $_POST['comment']; としてテキストフォームの値を拾っているのですが、 hidden データの comment_no は、どのように値を拾ったらよろしいのでしょうか? 前回の質問同様、AJAXを触り初めて間もなく、googleで調べようにも適切なキーワードが判らずにいる次第です。 お忙しいなか恐縮ですが、アドバイスのほど頂戴出来たら幸いです。 宜しくお願い致します。
- ページを遷移せずにデータ送信
はじめまして。こちらのカテゴリに質問投稿するのは初めてです。 投稿カテゴリが適切かどうかさえも不明ですが、お知恵を拝借したく投稿させて頂きます。 表題の通りですが、SNSなどに多く使われている、コメントを投稿する際、ページを遷移することなくフォームのデータを送信し、そのデータをMySQLに登録するとった流れを考えています。 http://shun-ichiro.com/log/reminder/php-jquery-ajax-mysql/ 上記サイトは、フォーム上のデータではなく、ボタンを押した際に決まったデータをDB内に登録する者ですが、データ処理という意味での流れは理想に近く、上記サイトでサンプルとして配布されているものをテストしているのですが、このページ上にテキストフォームなどを加えた場合の処理が、お恥ずかしながら一向に見えてこないのが現状です。 上記ページを例にした場合、テキストフォームを設置し、そのデータをDBに登録するための、post.js はどのようなスクリプトとなるのでしょうか? PHPはこれまで触ってきましたが、Ajax?Javascript?を触るのは初めてといっていい程で、色々と調べながら今日まで来ましたが、適切なキーワードさえも不明で、欲する情報になかなか辿り受けない状況です。(もうかれこれ1週間以上思考錯誤しています・・汗) お忙しいなか恐縮ですが、アドバイスのほど宜しくお願い致します。
- readyState確認後の処理ができない
jQueryによるajaxを試みています。checkboxにチェックを入れたときに動作するようにしたいので、以下のように書いているのですが、alertが動作しません。onreadystatechange = function(){より前に入れたalertは動作するので、イベントハンドラ?としては機能しているようなのですが、onreadystatechangeにひもづけている関数の書き方に問題があるのでしょうか? $(function(){ $("#check:checkbox").click(function() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'test.txt', true); xhr.onreadystatechange = function(){ if (xhr.readyState == 4) { alert("OK"); } }; }); });
- ajaxでhtmlを返して画面に描画…凄く遅い
-- jQuery.ajax({ url:url, data:parms, success:function(response){ --- httpリクエストを投げて、HTMLデータ(<option>~</option>が10~1万行ほど)を 受け取り、それを jQuery('#displist').html(response) で描画しています。 (select内のoptionになります) <option>~</option>の数が少ない時は問題ないのですが、1000を超えたあたりから 目に見えて重く、表示に時間がかかり、困っています。 サクッと表示させる方法はないものでしょうか…?
- テキストファイルに書き込む
jquery.jsを用いてデータを同じディレクトリにあるテキストファイルに書き込むスクリプトはどのように作ればいいのでしょうか?
- JSONをperlで受け取る方法
お世話になります。 jQueryを使用します。 Handsontableを使いたいと思います。 表に入力した内容をperlのCGIにデータ送信して、処理をしたいのですが どのようにすればいいのかがわからずにいます。 http://handsontable.com/demo/ajax.html こちらにサンプルがあるのですが、saveのときの処理がよくわかりません。 $.ajax の data にただの文字列を設定すれば、CGIでの受け取り方がわかるのですが、 表のデータ?(handsontable.getData()の部分)の場合、CGIではどのように 受け取れば良いのでしょうか? $.ajax({ url: "netaut2.cgi", data: {"data": "abcde"}, dataType: 'json', type: 'POST', : } ↑こうであれば、CGI側は $form = new CGI; $val = $form->param('data'); このようにして$valに"abcde"とデータが取れますが、 var json_data = [ {"name" : "Taro", "age" : 19}, {"name" : "Hana", "age" : 25} ]; $.ajax({ url: "netaut2.cgi", data: json_data, dataType: 'json', type: 'POST', : } のようにした場合がわかりません。 宜しくお願い致します。
- jquery serializable値取得
jQuery UIのsortableを利用し、HTMLで作成したテーブルをtr単位で ソートできるプログラムを作成しました。 ソート後の並びをDBに保存する為に、各TRにdata-idの属性を設定の上、 sortableのイベントメソッドから、データをサーバへ送るプログラムを書きましたがうまく動きません。 というより、、、サーバサイド側は、PHPでデータを取得しているのですが、 うまく処理する方法がわかりません。。。どうやったら、値を取得できるでしょうか。 下記にサンプルコードとサーバサイド側での取得データを記載しています。 取得したいデータは、サンプルデータ内の1、3、2です。 ユーザインタフェース側 ----------------------------------------------------- $('#src').sortable({ items: 'tr', axis: 'y', opacity: 0.2, handle: '.drag', placeholder: 'ui-state-highlight', update: function() { $.post('serverside.php', { file: $(this).sortable('serialize'), }); } }); ----------------------------------------------------- serverside.php ----------------------------------------------------- $res = $_POST['file']; ----------------------------------------------------- $resの中身を見たら、 file[]=1&file[]=3&file[]=2 が入ってました。 それぞれの値をどうやって取り出したらよいのでしょうか。。。
- ベストアンサー
- yamachan_tomo
- AJAX
- 回答数1
- Ajax ボタンが起動しない
ボタンを押しても関数が呼び出されなくて困っています。 ソースは以下のとおりです。 回答お願いします。 <html> <head><title>テスト1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var globalVar = "テスト"; function varTest(){ debugClear(); debug(globalVar); } </script> </head> <body> テスト1回目 <form> <input type="button" value="テスト開始" onclick="varTest();"/><br/> </form> </body> </html>
- Ajax テキストエリアについて
作ったテキストエリアにXmlHttpObjを出力したいのですがどのようにすればいいでしょうか? テキストエリアは <textarea id="text" style="width:100%; height:300px;"disabled></textarea><br> というように作りました。 XmlHttpObjは var xmlhttp; function httpHandler(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ alert(xmlhttp.responseText); } } function onButtonclick(){ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = httpHandler; xmlhttp.open("GET", "data.txt"); xmlhttp.send(null); } このようにしました。(仮で出力をアラート形式にしております。) 回答よろしくお願いします。
- ajaxによるIEの文字化け回避策について
貴重な場をお借りして質問させていただきます。 ajaxのIE対応について困っています。 やりたいことはボタンを押したら外部からhtmlを 読み込むということなのですが、 どうしてもIEだけ文字化けしてしまいます。(ボタンを押したら・・・という記述は下記には書いていません。) 文字コードがutf-8ではないということが原因なのですが 出来ればサーバーサイドでの記述なしに解決したいと思っています。 読み込むtest.htmlも親のindex.htmlもshift-jisでして、 この文字コードは変更できず困っております。 下記に現状のソース(ajax部分のみ)を記述したものを表記いたしますので、どなたかお力を貸していただけないでしょうか。 どうかよろしくお願いいたします。 ------------ jquery------------- $(function(){ $.ajaxSetup({ beforeSend: function(xhr){ xhr.overrideMimeType("text/html;charset=Shift_JIS"); } }); $.ajax({ type: 'GET', url: 'test.html', dataType: 'html', success: function(data) { $('#wrap').append(data); } }); }); ------------ test.html------------- <ul id="hoge"> <li>ここに画像やテキスト</li> </ul>