javascript - 为什么提交表单时数据没有了，出现“TypeError: NetworkError when trying to fetch resource”？

Question

我有一个问题，我无法用我正在尝试开发的电子商务网站（使用 Django）解决。

在我的结帐页面 (checkout.html) 中，我希望能够进行付款。但是当我点击“付款”按钮时，它什么也没做，所有客户的数据都消失了（姓名、地址、邮政编码等）。当我再次单击时，它可以工作，但没有数据...出现“交易完成”警报消息，我被重定向到“产品”页面。我在不同的浏览器中试过这个。以下错误消息显示：“类型错误：尝试获取资源时出现网络错误”。

我该如何解决这个问题？

非常感谢你的帮助。

结帐.html

{% extends 'store/main.html' %}
{% load static %}

{% block content %}

<div class="checkout-page">
    <form id="form">
        {% csrf_token %}
        <div class="order-summary">
            <div> <a class="back-to-button button" href="{% url 'cart' %}">&#x2190; Back to Cart</a> </div>
            <div> <h3> Order Summary </h3> </div>
            <div class = "order-summary-list"> 
            {% for item in items %}
            <div class="order-list">
                <div> <img class="thumbnail-small" src="{{item.product.imageURL}}"> </div>
                <div> <h5> // {{item.product.name}} // </h5></div>
                <div> <h5> // {{item.product.price|floatformat:2}} € // </h5> </div>
                <div> <h5> // {{item.quantity}} // </h5> </div>
            </div>
            {% endfor %}
            </div>
            <div> <h4> Items : {{order.get_cart_items}} <h4> </div>
            <div> <h4> Total : {{order.get_cart_total|floatformat:2}} € <h4> </div>
        </div>

        <div class="customer-info">
            <div id="customer-basic-info" class="customer-basic-info">  
                <div> <input required class="form" type="text" name="name" placeholder="Name.."> </div>
                <div> <input required class="form" type="email" name="email" placeholder="Email.."> </div>
            </div>
            <div> <h3> Shipping information </h3> </div>
            <div class="customer-shipping-info-1">
                <div> <input required class="form" type="text" name="address" placeholder="Address.."> </div>
                <div> <input required class="form" type="text" name="postcode" placeholder="Code postal"> </div>
            </div>
            <div class="customer-shipping-info-2">  
                <div> <input required class="form" type="text" name="city" placeholder="Ville.."> </div>
                <div> <input required class="form" type="text" name="country" placeholder="Pays.."> </div>
            </div>
        </div>

        <div class="payment-options">
            <div> <h5> Paiement <h5> </div>
            <div> <input class="button" type="submit" value="PayPal" > </div>
            <div> <button id="make-payment"> MAKE PAYMENT </button> </div>
        </div>
    </form>
</div>

<script type="text/javascript">

    var total = '{{order.get_cart_total}}'
    var shipping = '{{order.shipping}}'
    var form = document.getElementById("form")

    // form.addEventListener('submit', function(e){
    //  e.preventDefault()
    //  console.log('Form submitted.....')
    // })


    if (user != 'AnonymousUser'){
        document.getElementById('customer-basic-info').innerHTML = ''
    }

    document.getElementById("make-payment").addEventListener('click', function(e){
        submitFormData()
    })

    // Bug avec cette fonction car quand on clique sur paiement, on reste sur le même page. Voir part 4 à 51.25. 
    function submitFormData(){
        console.log('Payment button clicked')

        var userFormData = {
            'name':null,
            'email':null,
            'total':total,
        }

        var shippingInfo = {
            'address':null,
            'postcode':null,
            'city':null,
            'country':null,
        }

        shippingInfo.address = form.address.value 
        shippingInfo.city = form.city.value 
        shippingInfo.postcode = form.postcode.value 
        shippingInfo.country = form.country.value 


        if(user == 'AnonymousUser'){
            userFormData.name = form.name.value
            userFormData.email = form.email.value
        }

        var url = '/process_order/'
        fetch(url,{
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                'X-CSRFToken':csrftoken,
            },
            body:JSON.stringify({'form':userFormData, 'shipping':shippingInfo})
        })
        .then((response) => response.json())
        .then((data) => {
            console.log('Success:', data);
            alert('Transaction completed');

            cart = {}

            document.cookie = 'cart' + JSON.stringify(cart) + ";domain=;path=/"

            window.location.href = "{% url 'products' %}"
        })

    }

</script>


{% endblock content %}

标签： javascripthtmlfetchsubmitform-submit