javascript - 使用js ajax从html发布到php帖子

Question

我对 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>" ;

Answer 1

这里有多个问题。一个问题是所有这些代码(根据您的说法)都在 while 循环内；这意味着对于每次迭代，您都将创建执行相同功能的相同 JavaScript，从而使用不必要的脚本加载 DOM。另一个问题是 HTML，它的解析很糟糕，例如，您有一个按钮，该按钮在具有自己的 href 的 anchor 链接内有自己的功能。然而，这里最大的问题是它是如何被破坏的(他们称之为“意大利面条代码”)。你需要将事情分开才能解决这个问题。尝试 MVC 方法，其中您有负责解析的 View ，并且您的函数文件应充当 Controller /模型。我会执行以下操作:

你的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);
}

您的“ View ”应该包含您想要在 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);
        });
    });
});

我希望这会有所帮助。