How to use AJAX in Bitrix?

Question

1C-Bitrix

It is necessary to process the data from the form with AJAX'om. I looked at the examples from the documentation, but there is not a single example for processing the form.

Please write a simple example of processing data from the BX.ajax form, or a clear material on this topic.

PS I'm not familiar with Ajax, so the simpler the better

I'll be very grateful!

Answer 1

BX.ajax is the same Ajax, only wrapped in Bitrix. Use it almost exactly the same as regular Ajax with some nuances from Bitrix.
Here is an Ajax post for beginners
on Habré Documentation Bitrix BX.ajax
It's not quite clear what "form processing examples" means. Processing form fields for validity? Or collecting data, manipulating form data before submitting? Or where to send the request and what kind of script to write in the backend? Or how to get data from the backend, and then do something with it?
If you are not familiar with Ajax, then it is better to start by learning this technology. There's nothing complicated.
If a very short example, then here are 2 files. Specially used Bitrix wrappers for js.
simple site page with form /ajax.php

<?php

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
CJSCore::Init(array('ajax'));
?>

<div id="my-form">
    <input id="my-input"></div>
    <button id="my-button">send ajax request</button>
    <div id="my-result" style="margin:10px 0;padding:.5em;border:1px solid #ececec;"></div>
</div>

<script>
    const input = BX('my-input')
    const button = BX('my-button')
    const result = BX('my-result')
    
    BX.bind(button, 'click', () => {
      BX.ajax({
        url: '/ajaxhandler.php',
        data: {
          text: input.value,
        },
        method: 'POST',
        dataType: 'json',
        timeout: 10,
        onsuccess: function( res ) {
          console.log('res: ', res)
          result.innerText = res.text;
        },
        onfailure: e => {
          console.error( e )
        }
      })
    })
</script>

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");

and a script where ajax calls (/ajaxhandler.php):

<?php

$result = [
    'isSuccess' => true,
    'text' => "user was typing: {$_POST['text']}",
];

header("Content-type: application/json; charset=utf-8");
echo json_encode($result);

Enter text in the field. We press the button and below in the field the text 'user was typing' appears + the text that was entered in the field.
Study. I answered the question, you most likely have a bunch of additional questions. But all answers are in learning js, php and ajax in particular..

Answer 2

{status: "success", data: {…}, errors: Array(0)}
data:
fid: 285
__proto__: Object
errors: []
status: "success"
__proto__: Object

Here is such crap from Bitrix to get out and, in principle, it is impossible to get data from the object
, this does not work

data.fid;
data['fid'];

writes undefined