JQueryを使って$postなどでphpにデータを送ろうとしているのですがうまくいきません


コードは長すぎるらしく
コメント欄に貼らせてもらっています。

目的としては
ショッピングカートの中のセッションの表示するためです。
phpだけでもよいのですが、入れるたびに全体を読みこむのも負荷が大きくなってしまうと思い、JQueryを使ってカート部分のみを読みこみ負荷を小さくすることが目的です。

現在の形にはこだわっていませんので、違う方法があったら教えてください。

ちゃんと、プログラムの動きを理解したいのでコメント欄に解説をよろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/11/02 21:06:41
  • 終了:2011/11/04 14:37:32

ベストアンサー

id:tdoi No.1

tdoi回答回数174ベストアンサー獲得回数752011/11/03 12:48:33

ポイント200pt

提示してもらったコードからは何をしたいか分からないので、カートのようなものをjQueryを使った場合のサンプルを書いてみました。


cart.html

<!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-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <script language="JavaScript">
<!--
// 登録ボタンが押されると呼びだされる関数
function add()
{
  var item = document.form.product.value;
  // cart.phpにidを渡すと、現在のカートの内容を返してくる。
  // その内容でカート領域を書き換える。
  $.post('cart.php',
         { "id": item },
         function(response) {
//             $("#cart").empty().append(response);
           $('#cart').html(response);
         });
}
-->
    </script>
  </head>
  <body>
    <form name="form">
      <select name="product">
          <option value="1">りんご</option>
          <option value="2">なし</option>
          <option value="3">かき</option>
      </select>
      <input type="button" value="登録" onClick="add(); return false;"/>
    </form>

    <div id="cart">
        <!-- ここに現在のカートの内容がJavaScriptによって挿入される -->
    </div>

  </body>
</html>

cart.php

<?php
session_start();

// POSTされた商品IDの取得
$id = $_POST['id'];

// セッション中にカートがあるか確認。なければ配列として作成。
if (!isset($_SESSION['cart'])) {
    $_SESSION['cart'] = array();
}

// 既にカートにある商品は個数を追加、ない商品は1個として登録
if (!isset($_SESSION['cart'][$id])) {
    $_SESSION['cart'][$id] = 1;
} else {
  $_SESSION['cart'][$id] += 1;
}

$itemList = array(1 => 'りんご', 2 => 'なし', 3 => 'かき');
$cart = $_SESSION['cart'];
?>
<!-- カート部分の出力 -->
<table>

<?php foreach ($cart as $id => $count) { ?>
  <tr>
   <td><?php echo $id; ?></td>
   <td><?php echo $itemList[$id]; ?></td>
   <td><?php echo $count; ?></td>
  </tr>
<?php } ?>

</table>

基本的にこのままで動きます。上記のcart.htmlにアクセスしてもらい、セレクトボックスから商品を選んで登録を押すと、バックグラウンドでcart.phpにPOSTし情報を登録します。また結果として、カートの状態を返すので、その内容を画面下部に表示するようになってます。


簡単にはコメント残しましたが、分からない部分があればコメントなりで補足します。


何かの参考になれば。

他5件のコメントを見る
id:tdoi

> 1)ファイアーフォックスだとなぜか商品データ以外に数字が出てくるのですが(ボックスの真下に1や2)、これはファイアーフォックス特有のエラーということでしょうか?

これは個数の数字でしょうか?

ID,商品名,個数

という順に出すようにサンプルは書いてます。

> 2)onclickの中にreturn false;がありますが、これはどういう働きをするのでしょうか?

今回の件では不要でしたね。

buttonではなく、submitや、imageだと、return falseしないと実際にサブミットしてしまうので、それを回避するためのreturn false;でした。

3)多次元配列の場合php側はどう変化するのでしょうか?

idとnmaeという形でPOSTするのを、ベタに書くなら、

if (!isset($_SESSION['cart'][$id])) {

$_SESSION['cart'][$id] = array('name' => $name, 'count' => 1);

} else {

$_SESSION['cart'][$id]['count'] += 1;

}

とかでいいでしょう。

ただ、ユーザからPOSTされるデータが正しい保証はない訳で、idと名前が対応しないものがPOSTされてきたらどうするかといった処理が出てきてしまいます。

もし僕が作るなら、

$itemList = array(1 => 'りんご', 2 => 'なし', 3 => 'かき');

に相当する内容を共通化して、cart.htmlの方もPHPで処理してしまい、そのリストからセレクトボックスを生成するようにして、やはり送信するのはidだけにすると思います。

これで答になってますか?

2011/11/04 06:27:40
id:robopit

詳しい解説ありがとうございます。

idと名前はデータベースから引っ張ってきて

hiddenで送ろうと思うのでたぶんPOSTの正しさは大丈夫だと思います。

おかげ様でかなり前進できたと思います

ありがとうございました。

2011/11/04 14:37:13
  • id:Cherenkov
    dump用関数
    function pr2($var) { echo '<pre>'; print_r($var); echo '</pre>';};
  • id:robopit
    セッションに関してですが、自己解決できました。

    $_SESSION['cart'][$id] = $name;

    正しいかわかりませんが、とりあえず機能しているので
    Cherenkovさんdump用関数教えてくださってありがとうございました。
    たいへん役に立ちました

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません