Untitled

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <p><button id="getdata1">It's my button to get one data</button></p>
    And here a data itself:
    <p><textarea id="datahere1"></textarea></p>
    <p><button id="getdata2">It's my button to get all data</button></p>
    And here a data itself:
    <p><textarea id="datahere2"></textarea></p>
    <p>
    <form id="myform">
        firstname:<input type="text" name="firstname">
        secondname:<input type="text" name="secondname">
        <input type="submit">
    </form>
    </p>
    <script>
        async function getjson(myurl, curmethod) {
            let response = await fetch(myurl, {
                mode: "no-cors",
                method: curmethod,
                headers: {
                    "Accept": "application/json"
                }
            });
            let body = await response.json();
            return body
        }
        //getjson();

        let myurl1 = "http://127.0.0.1:8000/myfamily/1/";
        let myurl2 = "http://127.0.0.1:8000/myfamily/";
        let buttontoget1 = document.getElementById("getdata1");
        let buttontoget2 = document.getElementById("getdata2");


        buttontoget1.onclick = function () {
            getjson(myurl1, "GET").then(result => {
                document.getElementById("datahere1").value = `${result["firstname"]} ${result["secondname"]}`
            })
        }
        buttontoget2.onclick = function () {
            getjson(myurl2, "GET").then(result => {
                let data = '';
                for (let record of result) {
                    data += (`${record["firstname"]} ${record["secondname"]}` + '\n')
                }
                document.getElementById("datahere2").value = data
            })
        }

        let testpost = {
            firstname: 'koteyka',
            secondname: 'kotova'
        };

        document.getElementById("myform").onsubmit = async (e) => {
            e.preventDefault();
            //let formData = await new FormData(document.getElementById("myform"));
            let response = await fetch(myurl2, {
                mode: "no-cors",
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json;charset=utf-8'
                },
                //body: JSON.stringify(Object.fromEntries(formData))
                body: JSON.stringify(testpost)
            });
            let result = await response.json();
            alert(result.message);
            //let result = await response.json();
            //alert(result.message);
        }
    </script>
</body>

</html>