Axios Post 请求不工作它正在更改以获取请求答案

【问题标题】：Axios Post request Is Not Working it is Changing to get requestAxios Post 请求不工作它正在更改以获取请求
【发布时间】：2022-11-23 15:44:23
【问题描述】：

我正在尝试使用 Axios 向 Django 发送 Post 请求，但它不起作用相反，它在按下提交按钮后发送获取请求。我不知道为什么会这样我 Hvae 配置了 Everything corretelty 但它不起作用
任何对此有任何解决方案然后请帮助我我的 HTML 代码是

<!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>

这是我的 Js 脚本

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();
        
        axios.post('add/product_out',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)

网址.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)

【问题讨论】：

标签： django axios

【解决方案1】：

我认为问题在于浏览器的默认提交正在触发，使其跳过所有 javascript 部分。尝试使用 preventDefault() 来阻止它：

将事件传递给您的 js（注意括号中的 e） <input type="button" value="Submit" form = "out" onclick="submit(e)">

防止默认行为：

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

【讨论】：