javascript - XMLHttpRequest 在打开时未定义

Question

我正在尝试打印按下提交按钮时在表单中填写的日期范围和区域内的所有公共(public)假期。

我能够使用提示来收集输入，但我想使用表单来代替。

html

    <div id="root"></div>
    <script language="JavaScript" type="text/javascript" src="script.js"></script>

    Start Date: <input type="text" name="fromDate" id="fromDate" value="04-07-2019"><br>
    End Date: <input type="text" name="toDate" id="toDate" value="04-07-2020"><br>
    Class Country: <input type="text" name="country" id="country" value="usa"><br>
    Region: <input type="text" name="region" id="region" value="dc"><br>
    <input type="button" onclick="submit()" value="Submit">

javascript

    function submit(){
        var fromDate = document.getElementById("fromDate").name + "=" + document.getElementById("fromDate").value + "&";
        var toDate = document.getElementById("toDate").name + "=" + document.getElementById("toDate").value + "&";
        var country = document.getElementById("country").name + "=" + document.getElementById("country").value + "&";
        var region = document.getElementById("region").name + "=" + document.getElementById("region").value + "&";

        fullURL = "https://kayaposoft.com/enrico/json/v2.0/?action=getHolidaysForDateRange&" + fromDate + toDate + country + region + "holidayType=public_holiday";
        requestUrl()
    }

    function requestUrl(){
        var request = new XMLHttpRequest()

        request.open('GET', fullURL, true)

        request.onload = function () {
            console.log(this.response)
            var data = JSON.parse(this.response)
            data.forEach(holiday => {
                var date = String(holiday.date["day"] + "/" + holiday.date["month"] + "/" + holiday.date["year"])
                document.write(date)

            })
            display()
        }
    }

    function display(){
        request.send()
    }

我收到此错误:

Uncaught SyntaxError: Unexpected token u in JSON at position 0" at JSON.parse, requestURL, submit and HTMLInputElement.onclick.

Answer 1

        const btn = document.querySelector('.btn')
        btn.addEventListener("click",submit)
        function submit(){
            var fromDate = document.getElementById("fromDate").name + "=" + document.getElementById("fromDate").value + "&";
            var toDate = document.getElementById("toDate").name + "=" + document.getElementById("toDate").value + "&";
            var country = document.getElementById("country").name + "=" + document.getElementById("country").value + "&";
            var region = document.getElementById("region").name + "=" + document.getElementById("region").value + "&";

            fullURL = "https://kayaposoft.com/enrico/json/v2.0/?action=getHolidaysForDateRange&" + fromDate + toDate + country + region + "holidayType=public_holiday";
            requestUrl()
        }

        function requestUrl(){
            // 1. Create a new XMLHttpRequest object
            let request = new XMLHttpRequest();

            // 2. Configure it: GET-request for the URL /article/.../load
            request.open('GET', fullURL);

            // 3. Send the request over the network
            request.send();

            // 4. This will be called after the response is received
            request.onload = function() {
                if (request.status != 200) { // analyze HTTP status of the response
                    alert(`Error ${request.status}: ${request.statusText}`); // e.g. 404: Not Found

                } else { // show the result
                    var data = JSON.parse(this.response);
                    data.forEach(holiday => {
                        var date = String(holiday.date["day"] + "/" + holiday.date["month"] + "/" + holiday.date["year"])
                        document.write(date)

                    })
                }
            };
        }

    <div id="root"></div>


    <div>
        Start Date: <input type="text" name="fromDate" id="fromDate" value="04-07-2019"/><br>
        End Date: <input type="text" name="toDate" id="toDate" value="04-07-2020"/><br>
        Class Country: <input type="text" name="country" id="country" value="usa"/><br>
        Region: <input type="text" name="region" id="region" value="dc"/><br>
        <input type="submit" value="Submit" class="btn"/>
    </div>