Axios Post request Is Not Working it is Changing to get request

Я пытаюсь отправить запрос Post в Django с помощью Axios, но он не работает. вместо этого он посылает get запрос после нажатия кнопки submit. Я не знаю, почему это происходит, я настроил все правильно, но это не работает
. У кого-нибудь есть решение этой проблемы, пожалуйста, помогите мне. Мой код Html Is

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Out</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js" integrity="sha512-0qU9M9jfqPw6FKkPafM3gy2CBAvUWnYVOfNPDYKVuRTel1PrciTj+a9P3loJB+j0QmN2Y0JYQmkBBS8W+mbezg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{% load static %}
</head>
<body>
    
    <div align = "center">
        <form action="" name = "out" id ="out" >
            {% csrf_token %}
            <table>
                <th>Name</th>
                <th>Stock_out</th>
                <tr>
                    <td><input type="text" id="name" name="name"></td>
                    <td><input type="text" id="stock_out" name="stock_out"></td>
                </tr>
                <tr >
                    <td><span id ="name_er"></span></td>
                    <td><span id ="stock_err"></span></td>
                </tr>

            </table>
            <input type="button" value="Submit" form = "out" onclick="submit()">
        </form>

    </div>

    <script src="{% static 'out.js/'%}"></script>

    
</body>
</html>

Here Is My Js Script

function submit(){

    let nam = document.getElementById('name').value;
    let out = document.getElementById('stock_out').values


    if(nam=="" | nam==null){
        document.getElementById('nam-er').innerHTML="Name Insert please"
        return false
    
    }else{
        let form = document.getElementById('out');

        var data = new FormData(form);

        data.append('name', document.getElementById('name').value);
        data.append('stock_out', document.getElementById('stock_out').value);
        data.append("csrfmiddelwaretoken",'{{csrf_token}}');

        // form.reset();
        const url = BASE_URL + '/add/product_out';
        axios.post(url,data).then(function(resp){
            window.location.href = "add/success";
            console.log(resp);
        })
        .catch(function (error) {
            console.log(error);
        })

    }
    
}

Вот мой взгляд на Django

def product_out(request):
    if request.method =='POST':

        name = request.POST.get('name')
        stock = request.POST.get('stock_out')
        Stock_Out.objects.create(
            name=name,
            stock_out=stock
        )
        resp = {
        "status":'success'
        }
        return JsonResponse(resp)

urls.py

from django.urls import path
from add import views


urlpatterns =[

    path('add',views.add, name='add'),
    path('success',views.success, name='success'),
    path('stock_out',views.stock_out, name = 'stock_out'),
    path('product_out',views.product_out, name = 'product_out')
    
]

Я хочу отправить на сервер сообщение из поля ввода, которое показано на картинке, полученной из http ответа браузера (https://i.stack.imgur.com/3FrMS.png)

Думаю, проблема в том, что срабатывает стандартный submit браузера, заставляя его пропускать всю вашу часть javascript. Попробуйте предотвратить это с помощью preventDefault():

  1. Передайте событие вашему js (обратите внимание на e в скобках) <input type="button" value="Submit" form = "out" onclick="submit(e)">

  2. Препятствуйте поведению по умолчанию:

function submit(e){
    e.preventDefault()
    // ..the rest of your script here
}

Альтернативно, вы можете изменить кнопку отправки с <input type="submit" /> на <button type="button">Submit</button>

Вернуться на верх