プロが教えるわが家の防犯対策術！

AjaxでDBから取得したデータをリスト表示したいです

解決済

  • 質問者：eccschool
  • 質問日時：
  • 回答数：3件

AjaxでDBから取得したデータをリスト表示したいのですが、
successの部分にどのように記述したらいいのかが分かりません。
PHPからjason形式で配列で戻せればと思っています。
htmlには
n行3列の形で縦長になる形のリストをDOMで表示(になるんですかね？)を考えています。
よく分からないので教えて下さい。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： yyr446
  • 回答日時：

再びお疲れ様です。


私もそんなにプロフェッショナルじゃなく、回答を作って勉強しているってとこです。
<ul><li>...で作るって事ですが、それはそれで勉強になると思います。
それから<table>は非推奨になった訳ではなく、<table>を段組の
レイアウトに使うのはやめましょうという理由と、tableだと全て
表示するのに時間がかかるという理由でかたみが狭くなっているのです。
表を表として表示するならtableでも問題ないはずです。むしろLI要素を
CSSで2列、3列、4列に表示させる方が、技巧的な気がするのですが．．．

この回答への補足

おっしゃるとおりだと思います。
普通にtableタグでやろうかな？とも思っています。
いろいろやっているのですがうまくいきません。
phpでjasonencodeして渡しているんだけど、undefinedって出ています。
しかもすべての行が出てきたりなんだかな・？という感じです。

補足日時：2009/12/17 21:17
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

"[{\"no\":1,\"product_name\":\u307b\u3052\u307b\u3052\n\uff15\u7f36\u30bb\u30c3\u30c8,\"price\":3150,\"pro_num\":4,\"amount\":12600},{\"no\":2,\"product_name\":\u306f\u3052\u306f\u3052\n\uff15\u7f36\u30bb\u30c3\u30c8,\"price\":3675,\"pro_num\":4,\"amount\":14700},]"
jasonで出てきた文字列はこれで正しいでしょうか？うーん。分からないですね。

通報する
お礼日時：2009/12/17 22:25

No.2

  • 回答者： yyr446
  • 回答日時：

No.1です。

お疲れ様です。
前の回答でとりあえずにややこしいサンプルを回答してしまったので反省です。

補足のご要望に近づけた、簡単サンプルを作りなおしてみました。
サーバーから
[{"no":1,"kakaku":100,"suryo":1,"gokei":100},
{"no":2,"kakaku":100,"suryo":2,"gokei":200},
- - - - ]
みたいなJSONが返される前提です。table要素に出力します。
削除ボタンを押すと、その行のtr要素を引数に
function del_data(elm)を呼びます。
del_data(elm)の中身の送信処理は、書いていません。
前のよりかなり短くしました。装飾は何もありません。

サンプル＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Expires" content="0" />
<title>Ajax test</title>
<script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
<!--
function getdata(){
$.ajax({
type: "POST",
url:"/php/sendjson.php?",
dataType: "json",
success: function(data, status){
$('#Result > table').empty();
var result=$("<table>");
result.append('<tr><th>No.</th><th>価格</th><th>数量</th><th>合計</th><th>削除</th></tr>');
if(data.length > 0){
for(var i=0;i<data.length;i++){
var tr=$('<tr><td>' + data[i].no + '</td>' +
'<td>' + data[i].kakaku + '</td>' +
'<td>' + data[i].suryo + '</td>' +
'<td>' + data[i].gokei + '</td>');
var sakujyo_btn=$('<button>削除</button>');
sakujyo_btn.bind("click", function(){
del_data($(this).parents('tr').get(0));
});
var td=$('<td>');
td.append(sakujyo_btn);
tr.append(td);
result.append(tr);
}
$('#Result').append(result);
}
},
error: function(XMLHttpRequest, status, errorThrown){
alert("sss");
alert(XMLHttpRequest.url + ":"+ status);
}
});
}
function del_data(elm){
// alert($(elm).html());
var no =$($(elm).children().get(0)).text();
alert('No.' + no +'を削除します');
//この後またAJAXリクエストで削除要求を送信する。
}
// -->
</script>
<body>
<div>
<button onclick="getdata();">実行</button>
<div id="Result">（結果）<br />
</div>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

す、すみません。いつもいつも申し訳ないです。
実は「がんばらなきゃ！」って奮起して独力でがんばっていました。時代の流れ(？？)でテーブルを使わずにリストにしようとしていました。ul,
liのやつです。削除に関しては別途スクリプトを組んでいて(というかonlclckで値を飛ばしてPHPでしょり)問題なさそうです。投稿していただいた内容を参考にして完成させよと思います。

通報する
お礼日時：2009/12/16 20:49

No.1

  • 回答者： yyr446
  • 回答日時：

「Ajaxでsuccessの部分に」とあるので、たぶんjQuery使用の事だと思って


回答します。
要は、n行3列の形で縦長になる形のリストのDOM要素の親となる要素を
<table>とか<ul>とか<dl>で先に作成しておきます。結果が返ってきた時
それの子要素をすべて削除し、結果の配列の個数分ループ処理で、
子要素<tr>とか<li>とか<dt>を作って、親要素に追加していきます。
この子要素を作る時、結果のデータをinnerHTMLとかでセットします。
作成するリスト要素ですが、<table>を使わないなら、CSSでn行3列を
工夫する必要もあります。PHP側の処理（DBを読んでJSON形式で配列データ
として返す）は別途PHPの版にでも、ご質問されればよろしいかと。

参考になるかどうかわかりませんが、以前別の質問で作ったサンプルを
載せておきます。
そのものずばりじゃなく、GoogleWeb検索の結果をjQueryのajaxで処理しています。
（上部の検索結果のカーソルナヴィゲーション作成がごちゃごちゃまじっていて
解りにくいかもしれませんが、この場合余計ですから無視して下さい）

サンプル（GwebSearch2.htm）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="0" />
<title>Google Search Test by Ajax</title>
<style type="text/css"></style>
<script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
<!--
$(document).ready(function(){
$('#SarchForm > input:eq(1)').bind("click",function(event,start){
if(!start) start=0;
var keyword=$('#SarchForm > input:eq(0)').val();
$.ajax({
type: "GET",
url:"http://ajax.googleapis.com/ajax/services/search/ …
data: {
"q":keyword,
"v":"1.0",
"rsz":"large",
"hl":"ja",
"key":"ABQIAAAAG93o66s6C1e8nCJDkjmJ0xSVVYxLupw9AvipHbcBrNMoQN8XSBRA6NK6XyYISfT41Z7mY_whiu7HMg",
"start":start,
"safe":"off",
"lr":"lang_ja"
},
dataType: "jsonp",
success: function(data, status){
$('#GoogleResult > dl,span').empty();
if(data.responseStatus=="200"){
if(data.responseData.cursor){
var cursor = data.responseData.cursor;
var nextguide=$(document.createElement("span"));
for(var i=0;i<cursor.pages.length;i++){
var nexta =$(document.createElement("a"));
nexta.attr({href:"javascript:void(0);"});
nexta.text((i+1)+"頁目");
nexta.bind("click", function(event){
event.preventDefault();
var start = cursor.pages[$(this).text().substring(0,1)-1].start;
$('#SarchForm > input:eq(1)').trigger("click",start);
});
nextguide.append(nexta);
}
nextguide.append($('<a href="'+cursor.moreResultsUrl+'" target="_blank">もっと検索</a>'));
$('#GoogleResult').append(nextguide);
}
if(data.responseData.results && data.responseData.results.length > 0){
var results = data.responseData.results;
var result=$("<dl>");
for(var i=0;i<results.length;i++){
result.append('<dt><a href="' + results[i].url + '" target="_blank">' +
results[i].title + '</a></dt>' + '<dd>' +
results[i].content+'</dd>');
}
$('#GoogleResult').append(result);
$('#GoogleResult > dl').css("margin-left","10px");
$('#GoogleResult > span > a').css({margin:"5px",color:"black",background:"#FFF"});
$('#GoogleResult > span > a:eq('+
cursor.currentPageIndex + ')').css("background","yellow");
$('#GoogleResult').append(nextguide.clone(true));
}else{
var result=$("<dl>無し</dl>");
$('#GoogleResult').append(result);
return;
}
}else{
alert(data.responseDetails);
return fales;
}
},
error: function(XMLHttpRequest, status, errorThrown){
alert("sss");
　 alert(XMLHttpRequest.url + ":"+ status);
}
});
return false;
});
$('#SarchForm > img:eq(0)').bind("click", function(event){
$('#SarchForm > input:eq(0)').val("");
$('#GoogleResult > dl,span').empty();
});
});
// -->
</script>
</head>
<body>
<div><h3>Google Web Sarch by AJAX</h3>
<div id="GoogleSarchForm"></div>
<div id="SarchForm">
<input type="text" value="" size="40px" />
<input type="button" value="検索" />
<img src="http://www.google.com/uds/css/clear.gif" title="Clear" width=15px height=15px />
<div style="float:right;">powered by<br />
<img src="http://www.google.com/uds/css/small-logo.png"/>
</div>
</div>
<hr style="clear:both;"/>
<div id="GoogleResult">（検索結果）<br />
</div>
</div>
</body>
</html>

この回答への補足

ご返答有難うございます。
うぎゃーって感じでじっくり解読してみます。
これほど凝ったことではなくて一列目に価格、2列目に数量、3列目に合計金額4列目に削除用のリンク（または）画像ボタンをDOMで生成しようとしています。削除ボタンを押すとDBを更新してその行を消すというものです。自分の勉強のために作成しています。
だいたい何をしようとしているかお分かりですよね？
ふー・・・むずかしいや・・・。

補足日時：2009/12/16 11:15
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報