การส่งแบบฟอร์มการลงทะเบียนแบบไดนามิกโดยใช้วานิลลา Javascript ajax

ฉันต้องการใช้ความสามารถของ ajax ในการไม่รีเฟรชหน้าหรือเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าการลงทะเบียน สร้างโมดอลโต้ตอบการเข้าสู่ระบบ / ลงทะเบียนแล้ว ฉันมี javascript ajax เข้าสู่ระบบทำงานได้อย่างสมบูรณ์โดยใช้การเรียก ajax ไปยัง api เข้าสู่ระบบโดยไม่ต้องกำหนดค่าหรือเพิ่มโมดูลใด ๆ ฉันต้องการรวมแบบฟอร์มการลงทะเบียนในลักษณะเดียวกัน ฉันต้องการลงทะเบียนเพื่อ:

1. แสดงในโมดอล - ใช้งานได้
2. ส่งโค้ดจาวาสคริปต์ที่ทำงานร่วมกับ PreventionDefault
3. การตอบสนองล้มเหลว

Ajax Post กำลังส่งคืน '<' เห็นได้ชัดว่านี่คือการส่งคืน html ฉันจะรู้ได้อย่างไรว่าจะส่งข้อมูลในการโทร ajax ได้อย่างไร และจะคาดหวังอะไรจากการตอบกลับ ตัวอย่างของฉันด้านล่าง:

<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>

ทุกอย่างทำงานได้ยกเว้นการตอบสนอง ฉันไม่พบสิ่งที่คาดหวังจากคำตอบ หรือถ้าฉันผูกข้อมูลของเอล์มอย่างถูกต้อง ใครสามารถช่วยฉันในพื้นที่นี้?

การเข้าสู่ระบบจำเป็นต้องส่ง csrfToken พร้อมกับ

 ส่วนหัว: {
                'ประเภทเนื้อหา': 'แอปพลิเคชัน/json',
                'X-CSRF-โทเค็น': csrfToken
              },

และ "?_format=json" ต่อท้าย URL แต่สำหรับค่าการลงทะเบียน ฉันกำลังสุ่มสี่สุ่มห้า ใครมีข้อมูลบ้างว่าต้องผ่านอะไรบ้าง? คำตอบที่ฉันได้รับคือหน้า html

สุดท้าย การลงทะเบียนมี captcha v2 ซึ่งแสดงผลข้อผิดพลาด: "คำตอบที่คุณป้อนสำหรับ CAPTCHA ไม่ถูกต้อง"

ฉันยังดูที่หน้านี้: https://www.drupal.org/node/2405657

แสดง #ลงทะเบียน

โพสต์: https://example.com/user/register?_format=json
ประเภทเนื้อหา: application/json

{
  "ชื่อ": { "value": "fooBar" },
  "จดหมาย": { "value": "foo@bar.com" },
  "ผ่าน": { "value": "secretSauce" }
}
200 ตกลง

ฉันไม่ได้รับการตอบกลับ json มันส่งคืนข้อผิดพลาดทางไวยากรณ์: โทเค็นที่ไม่คาดคิด < ใน JSON ที่ตำแหน่ง 1

ดึงข้อมูล (url, {
            วิธีการ: 'โพสต์',
            ข้อมูล: JSON.stringify({
  "ชื่อ": { "value": "fooBar" },
  "จดหมาย": { "value": "foo@bar.com" },
  "ผ่าน": { "value": "secretSauce" }
}),


            ประเภทข้อมูล: "json",
            contentType: "application/json; charset=utf-8",
            ความสำเร็จ: ฟังก์ชัน (ข้อมูล) {
                console.log (ข้อมูล);
                successmessage = 'บันทึกข้อมูลสำเร็จแล้ว';
                $("#overlay_container").text(ข้อความสำเร็จ);
            },
            ข้อผิดพลาด: ฟังก์ชัน (ข้อมูล) {
                console.log (ข้อมูล);
                ข้อความสำเร็จ = 'ข้อผิดพลาด';
                $("#overlay_container").text(ข้อความสำเร็จ);
            }
        })
        .then(response=>response.json())
        .then(json=> {
            console.log(json);
        }).catch(ฟังก์ชัน(ผิดพลาด) {
                        console.log(ผิดพลาด); // แสดงข้อยกเว้นด้านบน
                 });

ไม่ประสบความสำเร็จ: หรือข้อผิดพลาดตอบสนองเพียงจับ

นอกจากนี้ เมื่อ _format=json ไปยัง url จะมีการรายงานข้อผิดพลาดต่อไปนี้:

{ข้อความ: 'รูปแบบที่ยอมรับไม่ได้: json'}
ข้อความ: "รูปแบบที่ยอมรับไม่ได้: json"
[[ต้นแบบ]]: วัตถุ

ต่อไป ฉันได้ลองติดตามการตอบกลับของโพสต์นี้โดย @Fons Vandamme ในการติดตั้ง Rest UI และกำหนดค่าการลงทะเบียนผู้ใช้

การลงทะเบียนผู้ใช้กับส่วนที่เหลือ

ข้อความ: "ไม่ได้รับข้อมูลบัญชีผู้ใช้สำหรับการลงทะเบียน"
[[ต้นแบบ]]: วัตถุ

ถัดไป: ภายใต้การขยายผู้ดูแลระบบ เปลี่ยนการตรวจสอบสิทธิ์จากคุกกี้เป็นการตรวจสอบสิทธิ์ขั้นพื้นฐานโดยการติดตั้งการตรวจสอบสิทธิ์พื้นฐาน HTTP ไปที่การกำหนดค่า UI ที่เหลือสำหรับการลงทะเบียนผู้ใช้ /ผู้ใช้/ลงทะเบียน: POST และข้อผิดพลาดใหม่คือคำขอไม่ถูกต้อง 400 รายการ