如何在JavaScript和Django中正確使用Fetch？

我正在嘗試制作一個 METAR 解碼器，如圖所示：

我fetch在 Vanilla js 中使用，我計劃將輸入的代碼發送到 Django 視圖。在 Django 視圖中，解碼后的資料將被獲取并顯示在模板中。
視圖.py

def ToolsPageView(request):
    if request.method == "POST":
        jsonData = json.loads(request.body)
        metarCode = jsonData.get('Metar')
        return JsonResponse("Success", safe=False)
    return render(request, 'app/tools.html')

網址.py

...
path("tools", views.ToolsPageView, name="tools")

工具.html

<div class="metar-code-decode">
    <form method="POST" action="{% url 'tools' %}" id="metar-form">
        {% csrf_token %}
        <input type="text" placeholder="Enter METAR: " id="metar-value"> <br>
        <input type="submit" id="metar-button">
    </form>
</div>

工具.js

function getDecodedMetar() {
    let formButton = document.querySelector("#metar-button");
    formButton.onclick = function (e) {
    let metarCode = document.querySelector("#metar-value").value;
    sendMetar(metarCode);
    //e.preventDefault();
    //getMetar(metarCode);
    };
}

function sendMetar(metarCode) {
    fetch('/tools', {
       method: "POST",
       headers: {
         "X-CSRFToken": getCookie("csrftoken"),
       },
       body: JSON.stringify({
          Metar: metarCode,
       }),
     });
 }

I have used the same code for POST using fetch where I had to let user update his/her profile. And that worked. But, this does not work and the error keeps on changing from time to time after restarting the server. At the first try, there was no error produced and the server also showed a POST request being made. And the latest error which I am getting is "In order to allow non-dict objects to be serialized set the safe parameter to False." I get the same thing again and again even after setting safe=False within the JsonResponse(). Worth to note, request when converted to request.json() gives an error.

Am I using fetch wrongly? If yes, what is the correct way?

uj5u.com熱心網友回復：

我不確定你的流程是否正確。這個想法是，當單擊按鈕時，將呼叫一個函式（獲取），該函式將資料發送到視圖，視圖將對其進行解碼并將其發送回 JavaScript，這樣它就可以在不重新加載整個頁面的情況下顯示。

我認為這可能會有所幫助：

let formButton = document.querySelector("#metar-button");
// When the button is clicked, 
formButton.onClick = function(e) {
    // do NOT send the form the usual way
    e.preventDefault();  
    
    let metarCode = document.querySelector("#metar-value").value;

    // Run the function that will send the code to the ToolsPageView
    sendMetar(metarCode);
}

async function sendMetar(metarCode) {
    const response = await fetch('/tools', {
       method: "POST",
       headers: {
         "X-CSRFToken": getCookie("csrftoken"),
       },
       body: JSON.stringify({
          'Metar': metarCode,
       }),
     })
     .then(response => response.json())
     .then(data => {
       console.log(data);
       // extract the decoded value from the data sent back from the view
       // display it by targeting the element in your html that you want
       // to display it
     });
 }

在你看來，

def ToolsPageView(request):
    if request.method == "POST":
        jsonData = json.loads(request.body)
        metarCode = jsonData.get('Metar')
        # Remove the original JsonResponse
        # return JsonResponse("Success", safe=False)
        # and INSTEAD,
        # Send the code back to the JavaScript
        # I don't THINK you need safe=False here?
        return JsonResponse({'MetarCode': metarCode})
    return render(request, 'app/tools.html')

標籤：javascript python django ajax fetch

上一篇：Fullcalendar-未從element.value讀取事件和事件源中的extraParams

下一篇：自行列印到控制臺的遞回階乘函式（C#）