张贴从HTML到PHP post与js ajax - posting from html to php post with js ajax

我是js和ajax的新手，需要一点帮助。我试图使购物车数量与js，在用户按下add_cart按钮后，我想获得用户想要的物品数量，并通过php post发布，按下按钮后，我从帖子获得0个结果。

所以它是这样的:

$id = bin2hex(openssl_random_pseudo_bytes(8));
$value = 1;
$list .= "<div id='single_product'>
          <a href='details.php?pro_id=$pro_id'><img src='admin_area/product_images/$pro_image' width='100%' height='60%' /></a>
          </br>
          <h3>$pro_title</h3>
          <p style='color:gray; text-decoration: line-through;'> $pro_fullprice ₪ :מחיר</p>
          <p style='color:#ff66ff; font-weight: bold; '> $pro_price ₪ :מחיר שלנו</p>
          </br>
          <a href='index.php?add_cart=$pro_id'><button class='button_addCart' value='submit' onclick='javascript:post();' >הוסף לסל</button></a>
          <form name='f1' method='post' action='../index.php'>
            <input type='button' name='inc' onclick='javascript:document.getElementById('"$id'").value++;' value='+' />
            <input type='number' name='quan' style='width:25%;' id='$id' value='$value' min='1' />
            <input type='button' name='dec' onclick='javascript:document.getElementById('"$id'").value--;' value='-' /> 
            <script type ='text/javascript' src='js/jquery.min.js'></script>
            <script type='text/javascript'>
                function post()
                {
                    var value=document.getElementById('"$id'").value;
                    $.post('functions.php',{postname:value},
                    function(data)
                    {
                        $('#value').innerhtml(data);
                    });
                }
            </script>    
          </form>
         </div>" ;

这里有很多问题。一个问题是，所有这些代码(根据你)是在一个while循环;这意味着对于每次迭代，您都要创建执行相同功能的相同JavaScript，从而用不必要的脚本加载DOM。另一个问题是HTML，它解析得很糟糕，一个例子，你有一个按钮，在锚链接中有自己的功能，锚链接有自己的href。然而，这里最大的问题是它是如何被弄乱的(这就是他们所说的"面条式代码")。为了解决这个问题，你需要把事情分开。尝试MVC方法，其中您拥有负责解析的视图，而您的函数文件应该充当控制器/模型。我会这样做:

你的functions.php应该是一个具有不同函数的类。其中之一应该是一个函数，它从数据库get_products()中检索数据，将其转换为数组，并将其存储在变量中。然后返回该变量。为了演示，我将硬编码一个数组:

//located in: app/functions.php
class Functions {
    function get_products() {
        $products_array = array(
            array(
                "id" => 1,
                "image" => "test.jpg",
                "fullprice" => 50,
                "price" => 40,
                "title" => "Some Name",
                "quantity" => 2,
            ),
            array(
                "id" => 2,
                "image" => "test2jpg",
                "fullprice" => 50,
                "price" => 40,
                "title" => "Some Name2",
                "quantity" => 1,
            )
        );
        return $products_array;
    }
    function update_cart(){
        return "cart updated";
    }
}
//the code below will be needed to execute AJAX
if (isset($_GET) && !empty($_GET)) {
    $res = $funcs->$_GET['function']();
    return json_encode($res);
}

你的"视图"应该有你想在DOM中解析的任何东西。在本例中，我们从functions.php文件中调用函数get_products()，然后通过页面解析数组。注意，我们还链接了所需的JavaScript文件:

<!-- located in: app/product.php -->
<?php
include("functions.php");
$funcs = new Functions();
$products = $funcs->get_products();
?>
<script src='js/jquery.min.js'></script>
<script src='products.js'></script>
<?php foreach ($products as $prod) { ?>
    <div class='product'>
        <a href='details.php?pro_id=<?= $prod["id"] ?>'>
            <img src='admin_area/product_images/<?= $prod["image"] ?>' width='100%' height='60%'/>
        </a>
        <h3><?= $prod["title"] ?>></h3>
        <p style='color:gray; text-decoration: line-through;'> <?= $prod["fullprice"] ?> ₪ :מחיר</p>
        <p style='color:#ff66ff; font-weight: bold; '> <?= $prod["price"] ?> ₪ :מחיר שלנו</p>

        <input class="plus" type='button' value='+'/>
        <input class="quantity" type='number' value='<?= $prod["quantity"] ?>' min='1'/>
        <input class="minus" type='button' value='-'/>
        <input class="product_id" type="hidden" value="<?= $prod["id"] ?>"/>
        <button class='button_addCart' value='submit'>הוסף לסל</button>
    </div>
<?php } ?>
<div id="results"></div>

你的脚本使用jQuery处理功能:

//located in app/products.js
$(document).ready(function () {
    $(".plus").click(function () {
        var $product_elem = $(this).closest(".product");
        var $quantity_elem = $product_elem.find(".quantity");
        $quantity_elem.val(parseInt($quantity_elem.val()) + 1);
    });
    $(".minus").click(function () {
        var $product_elem = $(this).closest(".product");
        var $quantity_elem = $product_elem.find(".quantity");
        $quantity_elem.val(parseInt($quantity_elem.val()) - 1);
    });
    $(".button_addCart").click(function () {
        var $product_elem = $(this).closest(".product");
        var quantity = $product_elem.find(".quantity").val();
        var id = $product_elem.find(".product_id").val();
        var postdata = {
            product_id: id,
            quantity: quantity
        };
        var url = "functions.php?function=update_cart";
        $.post(url, postdata, function (data) {
            console.log(data);
            $('#results').html(data);
        });
    });
});