我將 jquery ajax 轉換為純 js ajax 請求的錯誤在哪里

Question

那是我目前正在運行的JQuery代碼->

$("#newsLetter-form").on('submit',function(event){
        event.preventDefault();
        email = $('#emailId').val();
        console.log(email);
        $.ajax({
          url: '/subscribes/emailSubscribe',
          type:'POST',

          data:{
            "_token": "{{ csrf_token() }}",
            email:email,
          },
          success:function(response){
            console.log(response);
            $('#responseFromSub').text("Registred!");
            $('#responseFromSub').css('background','lightgreen')
            $('#newsLetter-form').css('display','none');
            $('.sucsessMessage').fadeIn(1);
            setTimeout(function(){$('.sucsessMessage').fadeOut(1);$('#newsLetter-form').css('display','flex');},3000);
          },
          error:function(response){
            console.log(response);
            var val = 'asdasd:111122:123123123';
            var response1 = response.responseJSON.message.substring(response.responseJSON.message.indexOf("\"title\":"));
            response1 = response1.split(":").pop();
            response1 = response1.split(',')[0];
            response1 = response1.replace("\"", "");
            response1 = response1.replace("\"", "");
            console.log(response1);
            $('#responseFromSub').text(response1);
            $('#responseFromSub').css('background','red');
            $('#newsLetter-form').css('display','none');
            $('.sucsessMessage').fadeIn(1);
            setTimeout(function(){$('.sucsessMessage').fadeOut(1);$('#newsLetter-form').css('display','flex');},3000);
          },
         });
    });

這是我轉換后的代碼，它不起作用，它說 400 bad request wrong data 。 我正在使用 laravel 和 mailchimp 與 jquery 的時事通訊，一切正常，但使用這個純 js代碼，沒有 ->

                function myFunc123() {
        var email1 = document.getElementById("emailId").value;
        alert(email1);
        var data = {
        "_token": '{{ csrf_token() }}',
        email: email1
    };
        var boundary = String(Math.random()).slice(2);
        var boundaryMiddle = '--' + boundary + '\r\n';
        var boundaryLast = '--' + boundary + '--\r\n'
        var body = ['\r\n'];
        for (var key in data) {
        body.push('Content-Disposition: form-data; name="' + key + '"\r\n\r\n' + data[key] + '\r\n');
    }
        body = body.join(boundaryMiddle) + boundaryLast;
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/subscribes/emailSubscribe', true);
        xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
        xhr.onreadystatechange = function () {
        if (this.readyState != 4) return;
        alert(this.responseText);
    }
        xhr.send(body);
    }

我解決了問題就在這里->

var email1 = document.getElementById("emailId").value;
        alert(email1);
        var data = {
        "_token": '{{ csrf_token() }}',
        email: email1

現在它正在工作..

但是頁面在請求后刷新了如何禁用刷新？

Answer 1

您忘記了event.preventDefault() ，它位於 jQuery 代碼中。 默認行為是在提交時刷新頁面（這是一個非常愚蠢的默認設置），您希望防止這種情況發生。

Answer 2

好的，最終轉換后的版本看起來像這樣。

 var ele = document.getElementById("newsLetter-form");
    ele.addEventListener("submit", handleEmail, false);
    function handleEmail(event) {
        event.preventDefault();
        var email1 = document.getElementById("emailId").value;
        var data = {
            "_token": '{{ csrf_token() }}',
            email: email1
        };
        var boundary = String(Math.random()).slice(2);
        var boundaryMiddle = '--' + boundary + '\r\n';
        var boundaryLast = '--' + boundary + '--\r\n'
        var body = ['\r\n'];
        for (var key in data) {
            body.push('Content-Disposition: form-data; name="' + key + '"\r\n\r\n' + data[key] + '\r\n');
        }
        body = body.join(boundaryMiddle) + boundaryLast;
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/subscribes/emailSubscribe', true);
        xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
        xhr.onreadystatechange = function () {
            if(xhr.status===200)
            {
                document.getElementById("responseFromSub").innerHTML="Registered";
                document.getElementById("responseFromSub").style.background="lightgreen";
                document.getElementById("newsLetter-form").style.display="none";
                document.getElementsByClassName("sucsessMessage")[0].style.display="block";
                setTimeout(function () {
                    document.getElementsByClassName("sucsessMessage")[0].style.display="none";
                    document.getElementById("newsLetter-form").style.display="flex";
                }, 3000);
            }
            else
            {
                document.getElementById("responseFromSub").innerHTML="Something goes wrong..";
                document.getElementById("responseFromSub").style.background="red";
                document.getElementById("newsLetter-form").style.display="none";
                document.getElementsByClassName("sucsessMessage")[0].style.display="block";
                setTimeout(function () {
                    document.getElementsByClassName("sucsessMessage")[0].style.display="none";
                    document.getElementById("newsLetter-form").style.display="flex";
                }, 3000);
            }
        }
        xhr.send(body);
    }