使用Axios向Django发送POST请求失败，自动转为GET请求求助

核心问题与修复步骤 #

1. 避免函数名与原生API冲突 #

你的JS函数名为submit，和表单原生submit()方法重名，会触发表单默认的GET提交行为，直接修改函数名：

// 把submit改成handleSubmit
function handleSubmit(){
    // 原有逻辑...
}

同时修改HTML按钮的onclick绑定：

<input type="button" value="Submit" form="out" onclick="handleSubmit()">

2. 修正JS中的拼写与逻辑错误 #

• 输入框值获取错误：document.getElementById('stock_out').values → 改为value（单数）
• 错误提示元素ID不匹配：document.getElementById('nam-er') → 改为name_er（和HTML中的ID一致）
• 逻辑或运算符错误：| → 改为||
  修改后的JS片段：

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

if(nam=="" || nam==null){
    document.getElementById('name_er').innerHTML="请输入名称";
    return false
}

3. 修正Axios请求路径与CSRF令牌 #

• 路径问题：你的urls.py中product_out是根路径下的路由，Axios写的add/product_out会导致路径叠加错误，改用Django的URL反转生成正确路径：

axios.post('{% url "product_out" %}', data)

• CSRF令牌拼写错误：csrfmiddelwaretoken → 正确拼写为csrfmiddlewaretoken，且FormData已自动包含表单中的{% csrf_token %}，无需手动append，删除冗余代码：

// 删除这行
// data.append("csrfmiddelwaretoken",'{{csrf_token}}');

4. 完善Django视图的请求处理 #

当前视图仅处理POST请求，收到GET请求时会返回空响应，补充非POST请求的处理：

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)
    # 处理非POST请求，返回405方法不允许
    return JsonResponse({"status": "error", "message": "Method not allowed"}, status=405)

5. 优化FormData使用 #

通过new FormData(form)已获取表单所有数据，无需手动appendname和stock_out，删除冗余代码：

// 删除这两行
// data.append('name', document.getElementById('name').value);
// data.append('stock_out', document.getElementById('stock_out').value);

修复后的完整代码示例 #

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="handleSubmit()">
        </form>

    </div>

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

    
</body>
</html>

JS脚本 #

function handleSubmit(){
    let nam = document.getElementById('name').value;
    let out = document.getElementById('stock_out').value;

    if(nam=="" || nam==null){
        document.getElementById('name_er').innerHTML="请输入名称";
        return false
    }else{
        let form = document.getElementById('out');
        var data = new FormData(form);
        
        axios.post('{% url "product_out" %}', data).then(function(resp){
            window.location.href = "{% url 'success' %}";
            console.log(resp);
        })
        .catch(function (error) {
            console.log(error);
        })
    }
}

内容的提问来源于stack exchange，提问作者Asif Ahamed Fahim