Данные формы передаются в html-таблицу

Я отправляю данные формы с помощью fetch API, а затем хочу отобразить некоторые значения переменных в HTML-таблице. Но это не работает так, как должно быть. Я могу получить данные формы в views.py, но не могу отправить их обратно в HTML-файл, чтобы показать те же данные в таблице. Без отправки данных через API fetch все работает нормально, как мне нужно. Я не могу понять, в чем моя ошибка. Я попытался удалить все ненужные части для отладки. Пожалуйста, дайте мне знать, где я ошибаюсь.

views.py

def home(request):
    context={}

    if request.method=="POST":
        options_value=request.POST['options_value']
        value=request.POST['value']
        print(options_value,value)
        context={"options_value":options_value, "value":value}
    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>{{options_value}}</td>
            </tr>
           
            <tr>
              <th scope="row">First Nane :</th>
              <td>{{value}}</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 => response.text())
      .then(data => {
       console.log('Success:', data);
       })
       .catch(error => {
       console.error('Error:', error);
       });

      });
    </script>

Вы можете использовать document.write() для переписывания html страницы с данными, полученными из запроса fetch.

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

Хотя это и удовлетворит ваши потребности, однако это не лучший способ обновления значений в документе. Переписывая весь HTML для документа, все таблицы стилей, изображения и скрипты должны быть загружены и выполнены заново, что является излишним. Кроме того, внедрение подобных скриптов опасно.

В случае, если вы выполняете такие операции, как сохранение результатов формы в базе данных, лучше вернуть JSONResponse, указывающий на результат операции, в запрос fetch, а затем обновить HTML с помощью JavaScript.

Ex.
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
  }
})

Либо вы используете Django- Template для отображения данных или вы используете JavaScript если вы хотите отправить вашу форму используя JavaScript тогда вы должны использовать его для отображения данных я использую JavaScript дайте мне знать если вы хотите использовать Django-Template тогда я добавлю это.

Просто используйте 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, safe=False)

    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>

1-й выбор) Если вы посылаете fetch-запрос, я думаю, лучше использовать jsonify({'data':dataJSON}) и получить данные на самой веб-странице.

2-й выбор) На вашем front-end HTML вы можете работать с ответом, сохраняя его следующим образом. JSON.parse('{{ context | tojson }}') в переменной. Убедитесь, что вы передаете контекст как JSON-объект из вашего views.py

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