jQueryでAJAXを利用しJSONデータを取得
- 商品コードを入力したら、AJAXで商品名と価格を取得して表示させ、それを確認して個数を入力して注文票を作ろうとしています。
- 商品名だけの取得は何とかできたのですが、商品名と価格といったように複数データを取得するのに苦労しています。
- JSON形式で受け取ればいいのだろうと考えて、そうしているのですが、うまくいきません。
- ベストアンサー
jQueryでAJAXを利用しJSONデータを取得
商品コードを入力したら、AJAXで商品名と価格を取得して表示させ、それを確認して個数を入力して注文票を作ろうとしています。 商品名だけの取得は何とかできたのですが、商品名と価格といったように複数データを取得するのに苦労しています。 独学のプログラミングなので初歩的な所が分かっていないのだろうと思いますが、JSON形式で受け取ればいいのだろうと考えて、そうしているのですが、うまくいきません。 下記は、商品名だけなら取得できているコードですが、どこを修正したらいいでしょうか。 よろしくお願いします。 ファイル名：test1.php <html> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#goodsid").keyup(function(e){ var search_val=$("#goodsid").val(); $.post("./SubTest1.php",{search_term : search_val},function(data){$("#goodsname").html(data);}) }) }); </script> </head> <body> <form id="searchform" method="post"> <div> <label>商品番号</label> <input type="text" name="goodsid" id="goodsid" /> </div> </form> <div id="goodsname"></div> <div id="goodsprice"></div> </body> </html> ファイル名：SubTest1.php <?php ini_set("default_charset","utf-8"); // MySQLクラスファイルの取り込みとインスタンスの作成 require_once("../mysql.php"); $mysql = new MySQL; $term = $_POST["search_term"]; $sql = "SELECT goods_name,goods_price FROM `goods_table` WHERE goods_num ='".$term."'"; $mysql->query($sql); $row = $mysql->fetch(); // ここまででデータを取得している if ($row){ $goodsname = $row['goods_name']; }else{ $goodsname = ""; } echo $goodsname; //呼び出し元のtest1.phpに返す値 ?>
- fitzgerald18
- お礼率92% (119/129)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 PHPにはJSON形式で返してくれる便利な関数があります。 ==== PHP側の改造点 $array = array(); $array['name'] = $row['goods_name']; $array['price'] = $row['goods_price']; header ( 'Content-type: application/json; charset=utf-8' ); echo json_encode ( $array ); ==== JS側の改造点 $.post( "./SubTest1.php", {search_term : search_val}, function(json){ var data = json.name + ',' + json.price; $("#goodsname").html(data); } ); こんな感じになると思います。 PHPの配列の添字がそのままJSONのキーとなります。 なのでjson.nameとjson.priceでそれぞれの値が取得できます。
関連するQ&A
- jQueryで配列JSONの読み込み方法
phpからの返り値data（json形式）を表示したいのですがうまくいきません。 コンソール上でjsonを取得できているようなのですが、値を表示しようとするとundifinedと表示されてしまいます。 どのように書き換えれば動作するようになるのでしょうか？ よろしくおねがいします！ -------------------------------------------------------- ■ receive.js ■ -------------------------------------------------------- $.ajax({ type: "POST", url: "receive.php", data: { "id": 3 }, success: function(data){ console.log(data); alert(data.time); //ここで「undifined」のエラーが出ます！！ $("#go").after(data.id); //ここは何も表示されません。 $("#str").html('準備完了'); }, error: function(data){ $("#str").html('準備未完了'); }, }); -------------------------------------------------------- ■ receive.php ■ -------------------------------------------------------- <?php require 'dbconnect.php';//dbconnectを呼び出し $data = array(); $id = $_POST['id']; $sql = " SELECT * FROM sample_table WHERE id = " . $id; $result = mysqli_query($connect,$sql) or die("クエリの送信に失敗しました。<br />SQL:".$sql); while ($row = mysqli_fetch_array($result)) { $data[] = $row; } mysqli_close($connect) or die("MySQL切断に失敗しました。"); // MySQLへの接続を閉じる header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); ?> -------------------------------------------------------- ■ index.html ■ -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <title>PHP * jQuery * ajax * MySQL</title> <script type="text/javascript" src="receive.js"></script> <script type="text/javascript" src="post.js"></script> </head> <body> <div class="ltd-form"> <form id="inquiry-form" method="get"> <fieldset> ・ ・ ・ </fieldset> <div id="go"></div> </form> </div> <div id="str"></div> </body> </html> -------------------------------------------------------- ■ 実行後のChromeのコンソール ■ -------------------------------------------------------- 0: Object 0: "3" 1: "1423789247" 2: "96" 3: "963" data1: "96" data2: "963" id: "3" time: "1423789247" --------------------------------------
- ベストアンサー
- JavaScript
- 1つのファイル上で複数のjavascriptを作動
ボタンを押したり、キーを入力すると別ファイルを呼び出すjavascriptがあります。 今回、同じページに同スクリプトを2つ設置しました。 ********************************************* 【Script1】 キーを入力すると./find.phpを呼び出す ********************************************* <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#search_results").slideUp(); $("#search_button").click(function(e){ e.preventDefault(); ajax_search(); }); $("#search_term").keyup(function(e){ e.preventDefault(); ajax_search(); }); }); function ajax_search(){ $("#search_results").show(); var search_val=$("#search_term").val(); $.post("./find.php", {search_term : search_val}, function(data){ if (data.length>0){ $("#search_results").html(data); } }) } </script> ************************************************* Script 1 を呼び出すキー入力画面 ************************************************* <form id="searchform" method="post"> <input type="text" name="search_term" id="search_term"/> <input type="submit" value="全表示" id="search_button" /> </form> ********************************************* 【Script 2】 キーを入力すると./find_op.phpを呼び出す ********************************************* <script type='text/javascript'> $(document).ready(function(){ $("#search_results_op").slideUp(); $("#search_button_op").click(function(e){ e.preventDefault(); ajax_search(); }); $("#search_term_op").keyup(function(e){ e.preventDefault(); ajax_search(); }); }); function ajax_search(){ $("#search_results_op").show(); var search_val=$("#search_term_op").val(); $.post("./find_op.php", {search_term : search_val}, function(data2){ if (data2.length>0){ $("#search_results_op").html(data2); } }) } </script> ************************************************* Script 2 を呼び出すキー入力画面 ************************************************* <form id="searchform_op" method="post"> <input type="text" name="search_term_op" id="search_term_op" /> <input type="submit" value="全表示" id="search_button_op" /> </form> ********************************************* 問題点 「Script 1 を呼び出すキー入力画面」上で文字を入力したりボタンを押したりすると、なぜかScript2が稼働してしまいます。 1つのページの中で、「Script 1」「Script2」がそれぞれ別々に稼働するためにはどこを変更すればよいでしょうか?
- ベストアンサー
- JavaScript
- JSONデータをｊQueryにわたす際に文字化け
MySQLからのデータをPHPでJSON形式に加工して、ｊQueryで表示させようしているのですが、 どうしても日本語だけ文字化けをしてしまい、エンコードを色々変えても文字化けしてしまい困っています。 どなたか助けていただけませんでしょうか？ -文字化け結果- No：1 Title：¤Ç¤¤¿¡ªÂçÀ®¸ù¡ª No：2 Title：¤³¤ì¤«¤é´èÄ¥¤ë¡ª phpにアクセスしても文字化けはいたしません。 ｊQueryからアクセスをすると完璧に文字化けをしてしまいます。 json.php (UTF-8) [ { no: "1", title: "できた！大成功！" }, { no: "2", title: "これから頑張る！" } ] index.html (UTF-8) <!DOCTYPE HTML> <html> <head> <meta charset="euc"> <title>jsonテスト</title> <link rel="stylesheet" type="text/css" href="style/desktop.css"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript"> jQuery(function(){ $.getJSON("./json.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+' Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> </head> <body> <div> <div id="demo"> <h4>リスト</h4> <p></p> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- Ajax データが取得できない
現在、AJAXを勉強中です。以下のhtmlを実行し、pref.jsを呼び出すコードをサイトから引用して記述しました。 しかし、「データを取得する」ボタンを押すと、【処理中です・・・】というメッセージが出るだけで、いっこうに該当データを取得できません。(本来であれば、指定されたxmlファイル内のデータが表示されるはずなのですが・・） 何が原因なのでしょうか。 解決策がわかる方がいらっしゃいましたらご教授ください。 よろしくお願いします。 ■pref.html --------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="pref.js"></script> <link href="pref.css" rel="stylesheet" type="text/css"> <title>pref</title> </head> <body> <div> <input type="button" id="btnData" value="データ取得" /> <input type="button" id="btnClear" value="クリア" /> </div> <div id="state"></div> <div id="result"></div> </body> </html> --------- ■pref.js ---- onload = init; var state; var result; function init() { $("btnData").onclick = prefDisp; $("btnClear").onclick = clearDisp; state = $('state'); result = $('result'); } function prefDisp() { state.innerHTML = "処理中です・・・<br />\n"; var url = "http://ws.bzen.net/pgtop/pref.xml"; var paramList = ""; new Ajax.Request(url, { method: 'get', onSuccess: getData, onFailure: showErrMsg, parameters: paramList }); function getData(data){ var response = data.responseXML.getElementsByTagName('Response'); var item = response[0].getElementsByTagName('Item'); var tmpHtml=""; for(i = 0; i < item.length; i++){ var prefCd = item[i].getElementsByTagName('PREF_CD'); var prefCdValue = prefCd[0].firstChild.nodeValue; var prefName = item[i].getElementsByTagName('PREF_NAME'); var prefNameValue = prefName[0].firstChild.nodeValue; tmpHtml += prefCdValue + " " + prefNameValue + "<br />\n"; } result.innerHTML = tmpHtml; state.innerHTML = "データを取得しました。<br />\n"; } function showErrMsg(){ clearDisp(); state.innerHTML = "データを取得できませんでした。<br />\n"; } } function clearDisp() { state.innerHTML = ""; result.innerHTML = ""; } ---
- ベストアンサー
- AJAX
- Ajaxで、JSONの添え字を表示する
以下のようなソースで、jQueryで、ajax_abc.htmlのid:Abcのボタンを押して、json_abc.phpから、JSON形式で、添え字がMySQLのabcテーブルのid列、値が同じMySQLのabcテーブルのalphabet列の値を全行分受け取り、<p>1:A</p><p>2:B</p><p>3:C</p>というような形でhtmlを生成したいのですが、値を表示することはできるのですが、添え字を表示する方法がわかりません。 どういう風にやれば、表示できるか教えてください。 [ajax_abc.html] <script type="text/javascript"> $(function(){ $("#Abc").click(function(){ $.post("json_abc.php", { }, function(json){ $('#Display').html("<p>"+json[1]+"</p>" + "<p>"+json[2]+"</p>" + "<p>"+json[3]+"</p>") }); }); }); </script> [json_abc.php] <?php $pdo = new PDO('mysql:dbname=test; host=localhost; charset=utf8', 'root'); $st = $pdo->query("SELECT * FROM abc"); $abc = array(); while ($row = $st->fetch()) { $abc += array ( $row['id'] => $row['alphabet'] ); } header('Content-Type: application/json; charset=utf-8'); echo json_encode($abc); [MySQLのabcテーブル] INT: VARCHAR 1: A 2: B 3: C
- ベストアンサー
- AJAX
- jQueryでajax
ajax（jQuery使用）を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>
- ベストアンサー
- AJAX
- HTML内の値を取得し、別の箇所にコピーする方法
下記のソースで書き換え実行ボタンを押下すると、2行目の表示内容を1行目にコピーした上で、2行目の内容を削除したいと思いました。 2行目の内容の削除は下記の3行で出来ていると思います。 $("#text2_1").html(""); $("#text2_2").val(""); $("#text2_3").val(""); ただし、2行目の内容を1行目にコピーする所がわかりませんでした。 $("#text1_1").html("2行目"); $("#text1_2").val("2行目"); $("#text1_3").val("2行目"); 上記3行の「2行目」と固定で記述されている箇所の代わりに、下記3行の値を取得する記述をしないといけないのかと思ったのですが、どのように記述すればよいかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <div id="text2_1">2行目</div> <input type="text" name="text2_2" id="text2_2" value="2行目" /> <input type="hidden" name="text2_3" id="text2_3" value="2行目" /> 【ソース】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#change").click(function(){ $("#text1_1").html("2行目"); $("#text1_2").val("2行目"); $("#text1_3").val("2行目"); $("#text2_1").html(""); $("#text2_2").val(""); $("#text2_3").val(""); }); }); // --> </script> <title>title</title> </head> <body> <form> <input id="change" type="button" value="書き換え実行" /> </form> <br /> <div id="text1_1">1行目</div> <input type="text" name="text1_2" id="text1_2" value="1行目" /> <input type="hidden" name="text1_3" id="text1_3" value="1行目" /> <div id="text2_1">2行目</div> <input type="text" name="text2_2" id="text2_2" value="2行目" /> <input type="hidden" name="text2_3" id="text2_3" value="2行目" /> </body> </html> 以上、宜しくお願いします。
- ベストアンサー
- AJAX
- ajax後、php,mysqlも一部再読み込み？
通常は一部でも変更が加わるとページの全てを再読み込みしますが、ajaxを利用すると、変更を加えた部分だけが再読み込みされるところまでは理解しています。 分からないところは、各プログラムへの動作がajaxを使った後の場合と通常の場合ではどのように違うのかです。 下記のような考え方で正しいですか？説明が下手で読みにくく申し訳ないですが、アドバイスをいただけたら嬉しいです。お願いします。 ■htmlは、実行を起こした部分を含めその子要素全てが再読み込みの対象に。 例えば、↓の<div#ajax>～</div>この間にある子要素の全てが再読み込みされる。それ以外のhtmlやcssは再読み込みされない。 ■cssは、htmlと同じで、その部分で使われているcssが対象。 ■javascriptは、ajaxの場合と通常の場合で違いはなく、常に全てが再読み込みされる(外部ファイル、記述の位置に関係なく)。 ■jquery、php、mysqlも、javascriptと同じで何一つ変わりなく通常通りに動く。 <?php ・includeで外部ファイルを取得 ・様々な処理 ・mysqlに接続して様々な処理 ?> <html> <head> <script type="text/javascript" src="外部ファイルでajaxを記述"></script> <title></title> </head> <body> <?php ・様々な処理 ?> <div id="main"> <div id="a"> <dl>～</dl> </div> <div id="ajax" onclick="ajaxの処理へ"> <table>～</table> <ul>～</ul> その他様々な処理 </div> <p>～</p> <img src=""> </div> <script type="text/javascript"> </script> </body> </html>
- ベストアンサー
- AJAX
- 遠隔サーバー情報取得後発動のjavascript
スマートフォンアプリをjavascriptで作っております。 ●【現在できていること】 【1】まずは、アプリ内から、自分の端末情報(下記の場合「G:8116556330」(取得方法はappleのシステムに準ずる)を取ります。(下記はわかりやすくするために固定で記載してますが、実際にはjavascriptによる読み込みとなります) 【2】次に、そのデータに関する情報を、自社サーバーのデータに取りに行きます。 ( $.post("https://hoge.jp/search.php", {search_term : name_id}, function(data)) 【3】その情報を表示させます。 【現在の仕様】 【3】を表示させるためには【1】【2】が完全取得された後に【3】用のfunctionを発動させなければなりません。 【1】取得のタイムラグ、【2】取得のタイムラグ、およびサーバーから端末までのタイムラグがあることから、現在、下記のようにbodyが読み込まれて5秒後に「document.getElementById('search_button2').click();」の形で時差クリックさせ「.click(function(e)」を発動させて【3】を表示させています。 【困りごと】 上記の方法だと、回線の混雑にかかわらず5秒後にクリックが発動されてしまうため、混雑時には表示できないリスクがあります。 【やりたいこと】 サーバーから端末に完全に情報を取得出来てから、即座に【3】用のfunctionを発動させたいです。または、クリックなど使用せず下記のGETスクリプト内で自動発動する方法があれば尚嬉しいです。 HTMLの読み込み後であればonloadが使用できますが、サーバー情報取得後というのが分かりません。ご指導いただきたくお願いいたします。 【GETスクリプト】 <script type="text/javascript"> var name_id; name_id = 'G:8116556330'; $(document).ready(function(){ $("#search_button2").click(function(e){ e.preventDefault(); ajax_search(); }); }); function ajax_search(){ $("#search_results").show(); $.post("https://hoge.jp/search.php", {search_term : name_id}, function(data){ if (data.length>0){ $("#search_results").html(data); } }) } </script> 【時差スクリプト(body読み込み後5秒後にボタンをクリック)】 <SCRIPT language="JavaScript"> function loadHello(){ document.getElementById('search_button2').click(); } setTimeout(loadHello, 5000); </script> 【Body要素 ボタン 表示場所】 <body onLoad="loadHello()"> <a id="search_button2">search_button2</a> <div id="search_results"></div> </body>
- ベストアンサー
- JavaScript
- javascript:名('.$data.')で複数のデータを送る方法,(jqueryのload利用)
初めまして、jqueryを勉強し始めている初心者です。 jqueryのloadを利用して、PHPでページ分割作成してますが、 javascript:名('.$data.')で複数のデータを送る方法ご存知の方いましたら、教えていただけないでしょうか。。 何ぶん、勉強初めて、1ヶ月弱のため、不備等がれば、すみません。 hidden等でまとめてid作成すると、うまくページ分割ができませんでしたので javascript:名('.$data.')で複数のデータを送る方法を検討しています。。 環境、jquery1.4, PHP5.0, eclipse3.5, mysql5.0 (sql等は問題なく動作してます) //<php側抜粋--testo.php> <html> <head> <script type="text/javascript" src="jquery1.4.js"></script> <script type="text/javascript" src="testo.js"></script> <title></title> </head> <body> <div id="box"></div> <?php $nm=$_POST['nm']; $page_num=$_POST['page_num']; //echo'<a href="javascript:next('.$page.')">次のページへ＞＞</a>'; //↑と１つの値であれば問題なく値をtesto.jsに渡しphploadできます。。 //↓のjavascript:名前('.データ値.')で、２つの値を //testo.jsでphpに渡しloadしたい。 //↓の解決策すみませんがご存知でしたら、教えてください。 //------ここ質問(1)------ echo'<a href="javascript:next('.$page.','.$nm.')">次のページへ＞＞</a>'; ?></body></html> //testo.js----- /*function next(page) {$("#box").load("testo.php",{page_num:page});} と１つの値であれば、POSTで正常にtesto.phpに渡せますが ２つ値を渡したいので、 おそらく、全然ちがったり、間違えていると思います。。 調べてみましたが、分かりませんでした。。 */ //--質問(2)↓-- function next(page,nm) {$("#box").load("testo.php",{page_num:page,nm:nm});} 質問は上記(1)(2)です。全ソース記載したいのですが、 文字数オーバーのため、記載できませんでした。。 すみません おそらく、不備や、勉強の不足さも感じるとは思いますが、 分かりやすく、ソース等で教えていただければ、幸いです。 すみません。。よろしくお願いいたします。
- 締切済み
- JavaScript
お礼
早速のご回答ありがとうございます。 やってみたのですが、結果として、 undefined,undefined と表示されました。 var data = json.name + ',' + json.price; の部分の json.nameとjson.priceがそれぞれundefinedと表示されているようです。 あと、商品名だけ表示させようとして、上記の部分を var data = json.name; に変更してやってみると、何も表示されませんでした。 私としては、undefinedと表示されると思っていたのですが....。 引き続き、調べてみますが、何かご助言などありましたら、よろしくお願いします。
補足
失礼いたしました。私のミスでした。 ご回答の通りで全く問題なく動作しました。 長時間悩んだものが解決しました。 本当にありがとうございました。