Question

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

我能够通过使用提示来收集输入内容，但我想改用表格。

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>

XMLHttpRequest在打开时未定义

1 个答案: