Gửi biểu mẫu đăng ký động bằng vanilla Javascript ajax

Tôi muốn sử dụng khả năng ajax không làm mới trang hoặc định tuyến lại người dùng đến trang đăng ký. Các phương thức đối thoại Đăng nhập / Đăng ký đã được tạo. Tôi có javascript ajax đăng nhập hoạt động hoàn hảo bằng cách sử dụng lệnh gọi ajax tới api đăng nhập mà không cần bất kỳ cấu hình hoặc mô-đun bổ sung nào. Tôi muốn tích hợp mẫu đăng ký theo cách tương tự. Tôi muốn đăng ký để:

1. hiển thị theo phương thức - điều này hoạt động.
2. Gửi mã javascript hoạt động với preventDefault
3. phản hồi không thành công.

Ajax Post đang trả về '<' rõ ràng là điều này đang trả về một số html. Làm cách nào để biết cách chuyển dữ liệu trong lệnh gọi ajax và điều gì sẽ xảy ra dưới dạng phản hồi? Ví dụ của tôi dưới đây:

<style>
.scroll {
  //background-color: #fed9ff;
  //width: 600px;
  height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  //text-align: center;
  //padding: 20px;
}


.close { 
  margin: 10px 25px 0px;
}
#log-title { 
  margin-left:25px;
}
</style>

<a data-target="#register-modal" data-toggle="modal" class="" id="" href="#register-modal">Register / Create an Account </a>
 
<div id="overlay_container"></div>

 
<!--  Register to download button so stays on same page.  -->
<div id="register-modal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button> 
  <h3 id="log-title">Please register:</h3>   
  <div class="modal-dialog">
    <div class="modal-content scroll">
      <?php
        $register_form = \Drupal::service('entity.form_builder')->getForm(\Drupal\user\Entity\User::create([]), 'register', []);    
        // Load the service renderer
        $render = Drupal::service('renderer');
        $rform = $render->renderPlain($register_form);
        echo $rform;
      ?>
    </div> <!-- Register modal content end-->
  </div><!-- Register modal-dialog end -->
</div><!-- Register modal end -->

<script>
  var registerForm = document.getElementById('user-register-form');
  if (registerForm ) {
    // capture registration submit, prevent from submission and use ajax to get response
    registerForm.onsubmit = async (e) => {
      e.preventDefault();
        // callRegCaptcha();
      elms =document.getElementById("user-register-form").elements; 
      var url = "https://website/user/register"; //website is a true url

      fetch(url, {
        method: 'POST',
        body: elms
      })
      .then(response=>response.json())
      .then(json => {
        console.log(json);
      });
    }
  }
</script>

Mọi thứ đều hoạt động ngoại trừ phản hồi. Tôi không thể tìm thấy bất cứ nơi nào những gì mong đợi như một phản hồi. Hoặc nếu tôi ràng buộc dữ liệu của cây du một cách chính xác. Bất cứ ai có thể giúp tôi trong lĩnh vực này?

Thông tin đăng nhập yêu cầu csrfToken được chuyển cùng với

 tiêu đề: {
                'Loại nội dung': 'application/json',
                'X-CSRF-Token': csrfToken
              },

và "?_format=json" được thêm vào url nhưng đối với các giá trị đăng ký, tôi đang chạy một cách mù quáng. Có ai có bất kỳ thông tin về những gì để vượt qua? Phản hồi tôi nhận được là trang html.

Cuối cùng, Đăng ký có captcha v2 xuất ra lỗi: "Câu trả lời bạn đã nhập cho CAPTCHA không chính xác"

Tôi cũng đã xem trang này: https://www.drupal.org/node/2405657

Hiển thị #Đăng ký

BÀI ĐĂNG: https://example.com/user/register?_format=json
Loại nội dung: ứng dụng/json

{
  "tên": { "giá trị": "fooBar" },
  "thư": { "giá trị": "[email protected]" },
  "pass": { "value": "secretSauce" }
}
200 được

Tôi không nhận được phản hồi json, nó trả về lỗi cú pháp: mã thông báo bất ngờ < trong JSON ở vị trí 1.

tìm nạp (url, {
            phương thức: 'POST',
            dữ liệu: JSON.stringify({
  "tên": { "giá trị": "fooBar" },
  "thư": { "giá trị": "[email protected]" },
  "pass": { "value": "secretSauce" }
}),


            Kiểu dữ liệu: "json",
            contentType: "ứng dụng/json; bộ ký tự=utf-8",
            thành công: chức năng (dữ liệu) {
                console.log(dữ liệu);
                successmessage = 'Dữ liệu được chụp thành công';
                $("#overlay_container").text(successmessage);
            },
            lỗi: chức năng (dữ liệu) {
                console.log(dữ liệu);
                successmessage = 'Lỗi';
                $("#overlay_container").text(successmessage);
            }
        })
        .then(response=>response.json())
        .sau đó (json=> {
            console.log(json);
        }).catch(function(err) {
                        console.log(err); // hiển thị ngoại lệ trên
                 });

Không thành công nào: hoặc lỗi đang phản hồi, chỉ là bắt

Hơn nữa, khi _format=json vào url, lỗi sau được báo cáo:

{thông báo: 'Định dạng không được chấp nhận: json'}
thông báo: "Định dạng không được chấp nhận: json"
[[Nguyên mẫu]]: Đối tượng

Tiếp theo, tôi đã cố gắng theo dõi phản hồi bài đăng này của @Fons Vandamme về việc cài đặt Rest UI và định cấu hình đăng ký người dùng

đăng ký người dùng với phần còn lại

thông báo: "Không nhận được dữ liệu tài khoản người dùng để đăng ký."
[[Nguyên mẫu]]: Đối tượng

Tiếp theo: trong phần mở rộng của quản trị viên, đã thay đổi xác thực từ cookie thành xác thực cơ bản bằng cách cài đặt xác thực cơ bản HTTP, điều hướng đến cấu hình giao diện người dùng còn lại cho Đăng ký người dùng /user/register: POST và lỗi mới là 400 Yêu cầu không hợp lệ.