1

ユーザーが別の製品数量をクリックしたときに、html テーブルを簡単に更新しようとしています。jQueryは初めてですが、ajax POSTメソッドに問題があります。

これが私がこれまでに得たものです：
test-table.html

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

    function swapContent(count){
        $(".price-sidebar").html("Put animation here").show();

        $.ajax({
            type: "POST",
            url: "myphpscript.php",
            data: {countVar: count},
            success: function(data){

            }
        });
    }
</script>
</head>
<body>
    <a href="#" onClick="return false" onmousedown="javascript:swapContent('18');">18</a>
    <a href="#" onClick="return false" onmousedown="javascript:swapContent('48');">48</a>
    <a href="#" onClick="return false" onmousedown="javascript:swapContent('96');">96</a>

    <section class="price-sidebar span8" >                
        <h2>Price Comparison</h2>
        </br>
        <table class="price-data">
            <tr>
                <th class='store-row'><h4>Store</h4></th>
                <th class='price-row'><h4>Price</h4></th>
            </tr>

        <!--insert returned foreach data -->


        </table><!--end price-data-->
    </section><!--end price sidebar-->
</body>

myphpscript.php

require('C:\wamp\www\Single-Serve-Coffee\includes\database-connect.php'); 
$countVar = $_POST['countVar'];

    function PriceCompare($countVar){

        $STH = $DBH->query('SELECT ProductID, MerchantName, Price, PageURL
        FROM merchants
        WHERE ProductID=677 AND Count=' . $countVar . '
        ORDER BY Price');
        $result = $STH->fetchAll();

        foreach($result as $row){
            echo "<tr>";
            echo "<td class='store-row'><h5 property='seller'>" . $row['MerchantName'] . "</h5></td>";
            echo "<td class='price-row'><h5 property='price'>$" . $row['Price'] . "</h5></td>";            
            echo "<td><a property='url' target='_blank' href='" . $row['PageURL'] . "' class='btn btn-danger'>GET IT</a></td>";
            echo "</tr>";
            echo "</br>";
        }
       }
?>

foreach でループされたデータを html ページに表示したいのですが、そこに表示する方法がわかりません。成功関数がないことはわかっていますが、php スクリプトから PriceCompare() 関数を呼び出す jQuery の書き方がわかりません。

4

1 に答える 1

1

php から変数を返し、成功の JavaScript 関数で結果を反復するとよいでしょう。

php 関数を変更し、結果を反復せず、fetchAll が返すものだけを返します。

PriceCompare 関数内で次の操作を行います。

 $STH = $DBH->query('SELECT ProductID, MerchantName, Price, PageURL
        FROM merchants
        WHERE ProductID=677 AND Count=' . $countVar . '
        ORDER BY Price');
        $result = $STH->fetchAll();

return $result;

php 内で、次のように 3 行目の関数を呼び出します。

$ data = PriceCompare ($ countVar);

そのjsonでエンコードされたオブジェクトを返します。

echo json_encode ($ data);

最後に dataType: 'json' を $ に入れます。次のようなajax JavaScript：

  

$. ajax ({
             type: "POST",
             dataType: 'json',
             url: "myphpscript.php"
             data: {countVar: count},
             success: function (data) {
                  console.log(data);//iterate here the object
             }
         });
于 2013-08-14T01:40:25.427 に答える