Updating a record by ajax in the database on click of the block div id, how to implement?

Question

JavaScript

Hello.
---
Background: there is a button

<a href="#add" id="add" data-method="post" class="btn btn-default"> добавить </a>

When clicking through the model, information should be sent to the database with the addition of new information without reloading the page by ID))) I know that it is possible to pass information by id without using <form>

Question: How to implement this through Pjax? I know how to display the passed parameters in the model, but I still don’t know how to make entries in the database without a form using ID via ajax. Please, fellow programmers, point to the true path, and do not be tempted to write shitty code, because I want to honor MVC and OOP until the end of writing my code.
--
Thank you for your responsiveness and competent answers in advance.

PS in Yii2 there are data commands that javascript uses, for example, to exit the admin panel, the button has the data-method="post" command without which the session cannot be interrupted, if removed, an error will come out, there were also commands like data- pjax
Obviously, the developers took into account this method of sending, because in such buttons the form tag is not observed at all, it is not there at all. I also noticed that they don’t use forms in contact either, they all send blocks through ajax and javascript. Obviously ReactJS technology is used, I could be wrong. Where to get knowledge? Where is the material on this method of data transfer?

Answer 1

For those who are looking! This method is called .submit()

<script type="text/javascript">
   $(document).ready(function () {
     $("#yellow").click(function() {
             $("#act form").submit();
     });
   });
</script>

The point is that you wrap the form in an id (so that the script does not react to other forms) and indicate what the script should react to when filling out the form, you can use .change() or .bind() - if through input, and .click () - if you want to pass through span or div.
I want to note that Vue.js does a good job with this task.

<div id="act">
        <form action="" method="post" data-ajax="post">
             <input type="text" id="yellow" name="param">
             <input type="submit" value="send">
        </form>
   </div>

Back it all up with ajax , hide the submit button, and the form will submit as soon as you click the checkbox, or select select, or enter a number, for other solutions, it's better not to do this.

Answer 2

You do not quite understand how it all happens, I think. There is no team that will take and add everything to the database. On the client, you need to catch onclick events (read javascript events), then pass some data to the server via XMLHttpRequest / newer fetch, then process it with any server-side language, including server-side javascript, and add it to the database through it. If you don’t want to write shitty code, it’s better not to use jQuery and other heavyweight and meaningless frameworks at this stage.
By the way, you do not need to wrap the button in a link - links are needed only when you need to take the user to another page with a redraw.

Answer 3

To be honest, it is absolutely not clear what exactly you need to add, and what it means
Let's start simple - where will you get the data from?

Answer 4

using jquery just
$.ajax
you can pass your id as a parameter