How to use the rails-ujs.ajax function in rails-ujs

validateRemote(event) {
    let input = event.target
    let formData = new FormData()
    formData.append('value', input.value)
    Rails.ajax({
      url: input.dataset.validateUrl,
      type: 'post',
      data: formData,
      success: (data) => {
        console.log(data)
        let field = input.closest('.form-field')
        let message = field.querySelector('.validate-message')

        if (data.valid) {
          field.classList.remove('invalid')
          field.classList.add('valid')
          if (message) {
            message.remove()
          }
        } else {
          field.classList.add('invalid')

alert(`${file.name} is too big! Should be less than 10MB.`)
      } else {
        let fileName = file.name
        let pendingTag
        if (file.type.startsWith('image/')) {
          pendingTag = `![Uplaoding ${fileName}...]()\n`
        } else {
          pendingTag = `[Uplaoding ${fileName}...]()\n`
        }
        let start = this.inputTarget.selectionStart
        let end = this.inputTarget.selectionEnd
        document.execCommand('insertText', false, pendingTag)
        this.inputTarget.setSelectionRange(start + pendingTag.length, start + pendingTag.length)
        let formData = new FormData()
        formData.append('attachment[file]', file)
        Rails.ajax({
          url: '/attachments',
          type: 'POST',
          dataType: 'json',
          data: formData,
          success: (data) => {
            let start = this.inputTarget.selectionStart
            let end = this.inputTarget.selectionEnd
            let content;
            if (file.type.startsWith('image/')) {
              content = `![${data.filename}](${data.url})\n`
            } else {
              content = `[${data.filename}](${data.url})\n`
            }
            this.inputTarget.value = this.inputTarget.value.replace(pendingTag, content)
            this.inputTarget.setSelectionRange(start + content.length, end + content.length)
          }

newPost() {
    let url = new URL(location.href)
    url.searchParams.set('position', this.postsTarget.dataset.total)
    Rails.ajax({
      url: url.href,
      type: 'get',
      dataType: 'html',
      success: (data) => {
        this.postsTarget.outerHTML = data.querySelector('#posts').outerHTML
        this.recalculateIndex()
        this.updateSlider()
        this.parseReaction(this.postsTarget.dataset.likePostIds, 'like')
        this.parseReaction(this.postsTarget.dataset.dislikePostIds, 'dislike')
        document.querySelector('#post-new-form textarea').focus()
        this.floatingActionTarget.floatingActionController.close()
      }
    })
  }

loadBefore() {
    if (this.postsTarget.dataset.reachedBegin) {
      return
    }

    this.loading = true
    this.loadingBeforeTarget.classList.remove('display-none')
    let url = new URL(location.href)
    url.searchParams.set('before', this.postsTarget.dataset.beginId)
    Rails.ajax({
      url: url.href,
      type: 'get',
      dataType: 'html',
      success: (data) => {
        let oldHeight = this.postsTarget.offsetHeight
        let oldScrollY = window.scrollY
        let postsElement = data.querySelector('#posts')
        this.postsTarget.insertAdjacentHTML('afterbegin', postsElement.innerHTML)
        this.postsTarget.dataset.beginId = postsElement.dataset.beginId
        this.postsTarget.dataset.reachedBegin = postsElement.dataset.reachedBegin
        this.postsTarget.dataset.offset = postsElement.dataset.offset
        window.scrollTo(0, oldScrollY + (this.postsTarget.offsetHeight - oldHeight))
        this.recalculateIndex()
        this.updateSlider()
        this.parseReaction(postsElement.dataset.likePostIds, 'like')
        this.parseReaction(postsElement.dataset.dislikePostIds, 'dislike')

preview() {
    this.previewOutputTarget.textContent = 'Loading...'
    this.element.classList.add('previewing')
    let formData = new FormData()
    formData.append('content', this.inputTarget.value)
    Rails.ajax({
      url: '/preview',
      type: 'POST',
      data: formData,
      success: (data, statusText, xhr) => {
        this.previewOutputTarget.innerHTML = xhr.responseText
      }
    });
  }
}

visitPosition(event) {
    let url = new URL(location.href)
    url.searchParams.set('position', event.detail.begin)
    Rails.ajax({
      url: url.href,
      type: 'get',
      dataType: 'html',
      success: (data) => {
        this.postsTarget.outerHTML = data.querySelector('#posts').outerHTML
        this.recalculateIndex()
        this.updateSlider()
        this.focuspost()
        this.parseReaction(this.postsTarget.dataset.likePostIds, 'like')
        this.parseReaction(this.postsTarget.dataset.dislikePostIds, 'dislike')
      }
    })
  }

}

    if (this.data.get('reachedEnd') == 'true') {
      this.disconnect()
      return
    }

    let rect = this.element.getBoundingClientRect()
    let distance = rect.height - (window.innerHeight - rect.top)
    if (distance < this.threshold) {
      this.loading = true
      this.element.classList.add('loading')
      let nextPage = parseInt(this.data.get('page')) + 1
      let url = new URL(location.href)
      url.searchParams.set('page', nextPage)
      Rails.ajax({
        url: url.href,
        type: 'get',
        dataType: 'html',
        success: (data) => {
          const page = data.querySelector('[data-controller~=infinite-page]')
          this.data.set('page', page.dataset.infinitePagePage)
          this.data.set('reachedEnd', page.dataset.infinitePageReachedEnd)

          const container = data.querySelector('[data-target~="infinite-page.container"]')
          this.containerTarget.insertAdjacentHTML('beforeend', container.innerHTML)
        },
        complete: () => {
          this.loading = false
          this.element.classList.remove('loading')
        }
      })

loadAfter() {
    if (this.postsTarget.dataset.reachedEnd) {
      return
    }

    this.loading = true
    this.loadingAfterTarget.classList.remove('display-none')
    let url = new URL(location.href)
    url.searchParams.set('after', this.postsTarget.dataset.endId)
    Rails.ajax({
      url: url.href,
      type: 'get',
      dataType: 'html',
      success: (data) => {
        let postsElement = data.querySelector('#posts')
        this.postsTarget.insertAdjacentHTML('beforeend', postsElement.innerHTML)
        this.postsTarget.dataset.endId = postsElement.dataset.endId
        this.postsTarget.dataset.reachedEnd = postsElement.dataset.reachedEnd
        this.recalculateIndex()
        this.updateSlider()
        this.parseReaction(postsElement.dataset.likePostIds, 'like')
        this.parseReaction(postsElement.dataset.dislikePostIds, 'dislike')
      },
      complete: () => {
        this.loading = false
        this.loadingAfterTarget.classList.add('display-none')