获取 API post 数据未将数据传输到 Django 中的 views.py

Question

我正在创建一个 Django 应用程序，为此我正在尝试使用 JavaScript fetch API 访问从 POST 请求接收的数据，但它不起作用。我可以看到由于 e.preventDefault(); 点击提交按钮后页面没有刷新；但根本没有获取这些值。我不明白我的错误是什么。我试图删除所有不必要的部分进行调试。请让我知道我哪里错了。

views.py

def home(request):

    if request.method=="POST":

        options_value=request.POST['dropdown_val']

        value=request.POST['val']

        print(options_value,value)

index.html

<form method="POST" action="" id="form">

      {% csrf_token %}



      <div class="d-flex justify-content-center" style="margin-top: 6rem">

        <div class="dropdown" style="display: flex" id="dropdown">

          <select

            class="form-select"

            aria-label="Default select example"

            name="options_value"

            id="dropdown_val"

          >

            <option disabled hidden selected>---Select---</option>

            <option value="1">Profile UID</option>

            <option value="2">Employee ID</option>

            <option value="3">Email ID</option>

            <option value="4">LAN ID</option>

          </select>

        </div>

<div class="col-3 bg-light" style="margin-left: 2rem">

          <input

            type="text"

            class="form-control"

            id="in3"

            type="text"

            placeholder="Enter Value"

            name="value"

            id="value"

          />

        </div>
 <div style="margin-left: 2rem">

          <input

            class="btn btn-primary"

            type="submit"

            value="Submit"

            style="background-color: #3a0ca3"

          />

        </div>

      </div>

    </form>

<script>

      let form = document.getElementById("form");

      let dropdown_val = document.getElementById("dropdown_val");

      let val = document.getElementById("value");

      const csrf = document.getElementsByName("csrfmiddlewaretoken")[0].value;



      form.addEventListener("submit", (e) => {

        e.preventDefault();



        const newform = new FormData();

        newform.append("dropdown_val", dropdown_val.value);

        newform.append("val", val.value);

        newform.append("csrfmiddlewaretoken", csrf);

        fetch("", {

          method: "POST",

          body: newform,

        })


      .then(response => response.json())
      .then(data => {
       console.log('Success:', data);
       })
       .catch(error => {
       console.error('Error:', error);
       });

      });

    </script>

Answer 1

问题是您在输入字段中有 2 个 id 标签：

 <input
    type="text"
    class="form-control"
    id="in3"   <--- problem is here
    type="text"
    placeholder="Enter Value"
    name="value"
    id="value"
 />

删除 id='in3' 它应该可以工作。您可以在提交表单时在浏览器的控制台中检查该错误。

获取 API post 数据未将数据传输到 Django 中的 views.py

Fetch API post data is not transferring data to views.py in Django

javascript

python

html

django

fetch-api