使用 JS 成功 POST 到数据库

Question

我正在尝试发布到谷歌数据库。当我提交表单时，会填充数据库。但是，我似乎没有收到来自数据库的任何回复。

我希望收到回复，如果回复成功，我将导航到新网页。

<script type="text/javascript">
    function myPOSTFunction() {

        //Define Variables
        var firstName = document.getElementsByName("firstName")[0].value;
        var lastName = document.getElementsByName("lastName")[0].value;
        var initial = document.getElementsByName("initial")[0].value;
        var suffix = document.getElementsByName("suffix")[0].value;
        var dob = document.getElementsByName("dob")[0].value;
        var phoneNum = document.getElementsByName("phoneNumber")[0].value;
        var emailAddress = document.getElementsByName("email")[0].value;
        var streetAddress = document.getElementsByName("street")[0].value;
        var aptNum = document.getElementsByName("apt")[0].value;
        var municipality = document.getElementsByName("town")[0].value;
        var state = document.getElementsByName("state")[0].value;
        var zip = document.getElementsByName("zip")[0].value;
        var mail_streetAddress = document.getElementsByName("mailStreet")[0].value;
        var mail_apt = document.getElementsByName("mailApt")[0].value;
        var mail_municipality = document.getElementsByName("mailTown")[0].value;
        var mail_state = document.getElementsByName("mailState")[0].value;
        var mail_zip = document.getElementsByName("mailZip")[0].value;
        //    var other_election = document.getElementsByName("other_election")[0].value;
        //     var other_votingDate = document.getElementsByName("other_votingDate")[0].value;
        var electionType = document.getElementsByName('selection');
        for (var i = 0, length = electionType.length; i < length; i++) {
            if (electionType[i].checked) {
                // do whatever you want with the checked radio
                electionType = electionType[i].value;

                // only one radio can be logically checked, don't check the rest
                break;
            }
        }

        const xhr = new XMLHttpRequest();
        xhr.onload = function() {
            const serverResponse = document.getElementById("serverResponse");
            serverResponse.innerHTML = this.responseText;
        }
        xhr.open("POST", "https://us-central1-votebymail.cloudfunctions.net/create_voter");
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        var outputString =
            'first_name=' + firstName +
            '&last_name=' + lastName +
            '&middle_name_or_initial=' + initial +
            '&suffix=' + suffix +
            '&dob=' + dob +
            '&phone_number=' + phoneNum +
            '&email_address=' + emailAddress +
            '&lives_street_address=' + streetAddress +
            '&lives_apartment_number=' + aptNum +
            '&lives_municipality=' + municipality +
            '&lives_state_abbreviation=' + state +
            '&lives_zip_code=' + zip +
            '&mail_to_street_address=' + mail_streetAddress +
            '&mail_to_apartment_number=' + mail_apt +
            '&mail_to_municipality=' + mail_municipality +
            '&mail_to_state_abbreviation=' + mail_state +
            '&mail_to_zip_code=' + mail_zip +
            '&election_voting_in=' + electionType;
        //    '&other_election_voting_in=' + other_election +
        //  '&other_election_voting_In_date=' + other_votingDate;

        xhr.send(outputString);
    }
</script>

Answer 1

你需要有一个响应回调。

   xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
            //do something else with the response.
       }