表单数据正在传入 html table

Question

我正在使用 fetch API 提交表单数据，然后我想在 HTML table 中显示一些变量值。但它并没有像预期的那样工作。我在 HTML table 中得到的值是 "undefined"。我不明白我的错误是什么。我试图删除所有不必要的部分进行调试。请让我知道哪里出错了。

控制台屏幕输出

Console log

urls.py

from django.contrib import admin
from django.urls import path,include
from django.shortcuts import render, HttpResponse
from home import views

urlpatterns = [

    path('', views.home, name='home')

]

views.py

from json import dumps

def home(request):

    context={}

    if request.method=="POST":

        options_value=request.POST.get('options_value')

        value=request.POST.get('value')

        print(type(options_value),value)

        context['options_value'] = options_value

        context['value']= value

        return JsonResponse(context, safe=False)

    return render(request, 'index.html', context)

index.html

<form method="POST" action="" id="form">
      {% csrf_token %}
          <select
            class="form-select"
            aria-label="Default select example"
            name="options_value"
            id="options_value"
          >
            <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>
          <input
            type="text"
            class="form-control"
            type="text"
            placeholder="Enter Value"
            name="value"
            id="value"
          />

          <input
            class="btn btn-primary"
            type="submit"
            value="Submit"
            style="background-color: #3a0ca3"
          />
    </form>

<table style="display: table" id="table">
        <tbody>
            <tr>
              <th scope="row">ProfileUID :</th>
              <td></td>
            </tr>
           
            <tr>
              <th scope="row">First Nane :</th>
              <td></td>
            </tr>

        </tbody>
      </table>
<script>
      let form = document.getElementById("form");
      let options_value = document.getElementById("options_value");
      let val = document.getElementById("value");
      const csrf = document.getElementsByName("csrfmiddlewaretoken")[0].value;


      form.addEventListener("submit", (e) => {
        e.preventDefault();
        const newform = new FormData();
        newform.append("options_value", options_value.value);
        newform.append("value", value.value);
        newform.append("csrfmiddlewaretoken", csrf);
        fetch("", {
          method: "POST",
          body: newform,
        })

      .then((response) => {

            console.log(response.json());
            let data = response.json();
            console.log("Success:", data);
            let tds = document.querySelectorAll("table tr td");
            tds[0].innerHTML = data.options_value;
            tds[1].innerHTML = data.value;

          })
       .catch(error => {
       console.error('Error:', error);
       });

      });
    </script>

Answer 1

您可以使用 document.write() 使用从提取请求中收到的数据重写页面的 html。

fetch(url,option) // Abstracted for brevity
.then(response => response.text())
.then(data => {document.write(data);})

虽然这可以满足您的需要，但是，这并不是更新文档中值的最佳方式。通过为文档重写整个HTML，所有样式表、图像和脚本都必须重新加载和执行，这是不必要的。此外，像这样注入脚本是危险的。

如果您正在执行诸如将表单结果保存到数据库之类的操作，最好 return 一个 JSONResponse 指示操作结果到 fetch请求，然后使用 JavaScript.

更新 HTML

例如
views.py

from django.http import JSONResponse

def home(request):
  if request.method == "POST":
    # Operations
    if success:
      return JSONResponse(
        {
          "successful": True,
          "message": success_message,
          "data": {}, # Anything else you'd like to send, like Profile UID and Name
        }
      )
    else:
      return JSONResponse(
        {
          "successful": False,
          "message": error_message,
          "data": {}, # Anything else you'd like to send
        }
      )
  # Handle other request methods

index.html的fetch请求

fetch(url, options)
.then(response => response.json()) // returns a promise that converts response to a JS Object
.then(data => { // data is a JS object, which is 
                // the same as the dictionary we had in views.py
  if (data.successful === true) {
    // You can set IDs for the `td` where you would like to update the values
    // like "profile-uid" and "profile-name"
    // data.data is the dictionary returned by the JSONResponse 
    // that has additional information, which is also converted to a JS Object
    document.getElementById('profile-uid').textContent = data.data.puid; 
    document.getElementById('profile-name').textContent = data.data.pname;
  }
  else {
    // Handle Errors
  }
})

Answer 2

要么使用 Django-Template 显示数据，要么使用 JavaScript 提交您的数据使用 JavaScript 的形式然后你必须使用 JavaScript 来显示我分享的数据 JavaScript 如果您想使用 Django-Template approch 让我知道然后我会添加它。

只需使用JsonResponse

def home(request):
    context={}

    if request.method == "POST":

        options_value = request.POST.get('options_value')

        value = request.POST.get('value')

        print(type(options_value),value)

        context['options_value'] = options_value
        context['value'] = value

        print(context)

        return JsonResponse(context)

    return render(request, 'index.html')

在你的JavaScript里面这样做

fetch("",
  {
    method: "POST",
    body: newform,
  })
  .then(response => response.json());
  .then(data => {
    console.log('Success:', data);
    let tds = document.querySelectorAll('table tr td')
    tds[0].innerHTML = data.options_value
    tds[1].innerHTML = data.value
  })
  .catch(error => {
    console.error('Error:', error);
  });

这就是您的 HTML 的样子

<table style="display: table" id="table">
  <tbody>
    <tr>
       <th scope="row">ProfileUID :</th>
       <td></td>
    </tr>
    <tr>
       <th scope="row">First Nane :</th>
       <td></td>
    </tr>
    
  </tbody>
</table>

Answer 3

第一选择）如果您要发送获取请求，我认为最好使用 jsonify({'data':dataJSON}) 并在同一网页上获取数据。

第二选择）在您的 front-end HTML 上，您可以通过像这样存储它来处理您的回复。 JSON.parse('{{ context | tojson }}') 在一个变量中。确保从 views.py

中将上下文作为 JSON 对象传递

表单数据正在传入 html table

Form data is passing in html table

html

javascript

python

django