Question

我在使用ajax更新数据库时遇到问题。基本上我有jQuery数字微调器，当用户点击该产品的那个数字时，意味着要上传到数据库。而是将所有产品更新为该数字或最后一个。我怎样才能使数据库中只更改用户正在更改的产品？

值得注意的是，我是jQuery / ajax的总菜鸟，但我正在努力学习。

嫩枝/ HTML：

{% extends '::base.html.twig' %}

{% block body %}

<h1 class="text-center"><u><i>Your Cart</i></u></h1>

    <div class="container">

        <div class="who_is_logged_in">
            {% if user is null %}
                <a href="{{ path ('fos_user_security_login') }}">Login</a>
            {% else %}
                <u>Hello<strong> {{ user }}</strong></u>
            {% endif %}
        </div>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Price Per Unit</th>    
                    <th>Remove Product</th>
                </tr>
            </thead>

            <tbody>
            {% for key, product in quantity %}  
                    <tr>
                        <td>{{ product.product }}</td> <!--Product-->
                        <td>
                            <input class="spinner" value="{{ product.quantity }}" style="width:30px">
                        </td> <!--Quantity-->
                        <td>${{ product.product.price|default('') }}</td> <!--Price-->   
                        <td>
                            <a href="{{ path('product_remove', {'id': product.product.id }) }}">
                                <button name="REMOVE" type="button" class="btn btn-danger" id="removeButton">
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                </button>
                            </a>
                        </td><!--Remove--> 
                    </tr>
                {% endfor %}      
            </tbody>
        </table> <!--top table-->

            <div class="money-container">
                <p class="text-right">Total Cost: ${{ totalCostOfAllProducts }}</p>
            </div> <!--moneyContainer-->

        {% for flash_message in app.session.flashbag.get('notice') %}
            <div class="flash-notice">
                <strong>{{ flash_message }}</strong>
            </div> <!--flashNotice-->
        {% endfor %}

    </div> <!--container-->

    <ul>
        <li>
            <a href="{{ path('product') }}">
                Add More Products
            </a>
        </li>
        <li>
            <a href="{{ path('product_bought') }}">
                Buy These Products
            </a>
        </li>
    </ul>


    <script type="text/javascript">
     $(".spinner").spinner();
        $('input.spinner').on('spinstop', function(){
            min: 0
            console.log('spinner changed');
            var $this = $(this);
            var value = $('.spinner').val();
            var request = $.ajax({
                url: "{{ path('product_quantityUpdate') }}",
                method: "POST",
                data : {
                    quantity: this.value,
                }
            }).done(function(result){
                console.log('success', result);
            }).error(function (xhr, ajaxOptions, thrownError) {
                console.log(xhr.status);
                console.log(xhr.responseText);
                console.log(thrownError);
            });
        });
    </script>

{% endblock %}

相关控制器功能：

/**
 * Updates quantity using ajax/jQuery request from showCart twig file
 *
 * @Route("/quantityUpdate", name="product_quantityUpdate")
 * @Method("POST")
 * @Template()
 */
public function quantityUpdateAction(Request $request) {

    $em = $this->getDoctrine()->getManager();

    $cart = $em->getRepository('ShopBundle:UserCart')->findOneBy(['user' => $this->getUser(), 'submitted' => false]);

    $productsInUsersCart = $cart->getQuantities();

    foreach ($productsInUsersCart as $key => $value) {

        $productsInUsersCart = $value->getQuantity();   // Within the loop, gets the quantity of the product being changed
            $value->getProduct()->getId();     //SHOULD be the product ID
            $value->getUserCart()->getId();   //SHOULD be the user's cart ID

/* ----------------------------- Like Below & Will Update EVERYTHING in Users Cart ----------------------------- */

    // dump($request->get('id_value'));
    // dump($request->get('prodId')); die;
        $value->setQuantity($_POST['quantity']);
        $em->persist($value);
        $em->flush();
    }

/* ----------------------------- Like Below & Will Update the LAST product in Users Cart ----------------------------- */

        // $value->setQuantity($_POST['quantity']);
        // $em->persist($value);
        // $em->flush();

    return new Response ("This has been successful!");
}

Answer 1

var id_value = $（this）.val（）。id; //没有参数的val（）返回输入元素的值

要访问ID，您需要将其写为

var id_value = $（this）.attr（'id'）; //这将从元素

返回属性id值

注意：此用于指向当前元素

Answer 2

通过添加data-name=""或id=""来将产品ID添加到您的input.spinner 然后使用$(selector).attr('id');或$(selector).data(name);

访问它

<input class="spinner" data-pid="{{product.product.id}}" value="{{product.quantity}}" style="width:30px">

然后更新你的功能

$('input.spinner').on('spinstop', function(){
    min: 0
    console.log('spinner changed');

    var value = $(this).val();
    var productId = $(this).data('pid');

    var request = $.ajax({
            url: "{{ path('product_quantityUpdate') }}",
            method: "POST",
            data : {
                quantity: value,
                id: productId
            }
        }).done(function(result){
            console.log('success', result);
        }).error(function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.status);
            console.log(xhr.responseText);
            console.log(thrownError);
        });
}

这会将数量和ID发送到您的php脚本，在这种情况下，您正在更新现有行，因此您不需要循环，只需检索单行修改它并存储在DB中

$em = $this->getDoctrine()->getManager();
$cart = $em->getRepository('ShopBundle:UserCart')->findOneBy(['user' => $this->getUser(), 'id' => $request->request->get('id'), 'submitted' => false]);
$cart->setQuantity($request->request->get('quantity'));
$em->persist($cart);
$em->flush();

使用ajax / jQuery更新到数据库

2 个答案: