加载资源失败：服务器响应状态为 500（内部服务器错误）

Question

我的网页正常运行，直到我执行一个 javascript AJAX 片段，它开始在加号处显示购物车功能中的错误 500，当我单击添加时它只会增加数据量并且必须重新加载页面才能看到数字数量，用户端是看不到的

html 脚本

<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="" crossorigin="anonymous"></script> 

Views.py

def add_to_cart(request):
    user = request.user
    product_id = request.GET.get('prod_id')
    product = Product.objects.get(id=product_id)
    Cart(user=user, product=product).save()
    return redirect('/cart')
def show_cart(request):
    if request.user.is_authenticated:
        user = request.user
        cart = Cart.objects.filter(user=user)
        amount = 0.0
        shipping_amount = 10.0
        total_amount = 0.0
        cart_product = [p for p in Cart.objects.all() if p.user == user]
        if cart_product:
            for p in cart_product:
                tempamount= (p.quantity * p.product.final_price)
                amount += tempamount
                total_amount = amount+ shipping_amount
        context = {'cart':cart, 'total_amount':total_amount, 'amount':amount,'shipping_amount':shipping_amount}
        return render(request, 'general/addtocart.html', context)
    else:
        return redirect('login')
def plus_cart(request):
    if request.method == 'GET':
        prod_id =  request.GET['prod_id']
        c= Cart.objects.get(Q(product=prod_id) & Q(user = request.user)) 
        c.quantity+=1
        c.save()
        amount = 0.0
        shipping_amount = 10.0
        cart_product = [p for p in Cart.objects.all() if p.user == request.user]
        for p in cart_product:
            tempamount= (p.quantity * p.product.final_price)
            amount += tempamount
            total_amount = amount+ shipping_amount
        data={
            'quantity':c.quantity,
            'amount': amount,
            'total_amount': total_amount
        },
        return JsonResponse(data)

Javascript.js

$('.plus-cart').click(function () {
    //console.log("Click")
    var id = $(this).attr("pid").toString();
    var eml = this.parentNode.children[2]
    //console.log(id)
    $.ajax({
        type:"GET",
        url:"/plus_cart",
        data:{
            prod_id: id
        },
        success: function (data){
            //console.log(data)
            //console.log('success')
            eml.innerText = data.quantity
            document.getElementById("amount").innerText = data
            document.getElementById("total_amount").innerText = data
        }
    })
})

addtocart.html

<div class="card-body">
    {% for cart in cart %}
    <div class="row">
        <div class="col-sm-3 text-center align-self-center">
            <img src="{{cart.product.product_image.url}}" alt="" srcset="" class="img-fluid img-thumbnail shadow-sm" height="150" width="150" />
        </div>
        <div class="col-sm-9">
            <div class="m-2 py-2">
                <h6>{{cart.product.title}}</h6>
                <p class="mb-2 text-muted small">Description: {{cart.product.description}}</p>
                <div class="my-3">
                    <label for="quantity">Quantity:</label>

                    <a class="minus-cart btn" pid="{{cart.product.id}}"><i class="fas fa-minus-square fa-lg"></i></a>

                    <span id="quantity">{{cart.quantity}}</span>

                    <a class="plus-cart btn" pid="{{cart.product.id}}"><i class="fas fa-plus-square fa-lg"></i></a>

                    <a href="#" class="btn btn-sm btn-secondary mr-3" pid="{{cart.product.id}}">Remove Item</a>
                    <span class="p-lg-5"><strong>Rs. {{cart.product.final_price}}</strong></span>
                </div>
                <div class="d-flex justify-content-between"></div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

urls.py

path("plus_cart/", views.plus_cart),

有什么方法可以修复 500 服务器错误，或者我的服务器端错误，我正在使用本地主机

Answer 1

您可以使用 statusCode 处理错误，并在您的 ajax 请求中使用您的错误代码从后端了解您的错误。通常带有 500 的错误代码表示您的后端有错误。

$.ajax({
    type:"GET",
    url:"/plus_cart",
    data:{
        prod_id: id
    },
    statusCode: { // add this block code
        500: function(response) {
           console.log(response)
        }
    }, // add this block code
    success: function (data){
        //console.log(data)
        //console.log('success')
        eml.innerText = data.quantity
        document.getElementById("amount").innerText = data
        document.getElementById("total_amount").innerText = data
    }
})

之后你可以在你的浏览器控制台上检查错误，这样你就可以从后端捕获错误