JavaScript & Ajax 不刷新 CRUD

Question

我有一个关于 JavaScript 的问题。我想在不刷新页面的情况下创建 CRUD。我可以创建、读取和删除项目。但是当我更新项目时它会出现问题。当 table tr 双击被点击或编辑图标被创建时，我想要一个函数工作（我将一个 id 作为数据发送给函数），函数通过ID从api获取数据并填写表格第一次提交表单时，它会正确更新表单。但是第二次我更新了另一个项目并提交了。系统更新此项和上一项第三次重复此过程。此时每3行的数据根据上次的数据变化这散文一次又一次地重复我用警报记录了 ID。我在下面发送我的 kod。有人可以帮我吗？

            const options = {
                headers: {'Authorization': "Bearer " + readCookie('AuthToken')}
            };

            let UrlArgs = {
                'action': "read",
                'module': "positions",
                'sector': "hrm"
           };
            alert(ids); //**one ID**
            urlgen(UrlArgs).then(url => { 
                axios.get(url + "/" + ids, options)
                    .then(function (response) {
                        alert(ids); //**one ID**
                        let data = response['data'];
                        $('#PositionEditModal').text("Pozisiya redaktə edilir: " + data['name']);
                          $("#PositionEditForm input[name=name]").val(data['name']);
                        $('#PositionEditForm select[name="permission_level"] option').each(function () {
                            if ($(this).val() == data['permission_level']) {
                                $(this).attr("selected", "selected");
                            }
                        });
                        alert(ids); **//one ID**

                        $('.PositionEditModal').modal('show');
                        $(document).on('click', '#submitUpdate', function () {
                           
                            let id = data['id'];
                            alert(id); //**two ID**
                            // $('#PositionEditForm input, #PositionEditForm select').jqBootstrapValidation({
                            // preventSubmit: true,
                            // submitSuccess: function ($form, event) {
                            //     event.preventDefault();
                            //     $this = $('#submitUpdate');
                            $('#submitUpdate').prop('disabled', true);
                            let form_data = $("#PositionEditForm").serialize();

                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                                }
                            });
                            alert(id);
                            let editUrl = "";

                            editUrl = '{{route("erp.panel.hrm.positions.update", ":id")}}';
                            editUrl = editUrl.replace(':id', id);
                            $.ajax({
                                url: editUrl,
                                method: "POST",
                                data: form_data,
                                cache: false,
                                beforeSend: function () {
                                    $(".beforeSend").hide();
                                    $(".loadingSend").show();
                                },
                                success: function () {
                                    setTimeout(function () {
                                        $('#PositionEditForm').trigger('reset');
                                        $('.PositionEditModal').modal('hide')
                                        errorManagment(null, "Vəzifə uğurla redaktə edildi");
                                    }, 1000);
                                    setTimeout(function () {
                                        datafetch();
                                    }, 1000);
                                },
                                error: function (request) {
                                    $.each(request.responseJSON.errors, function (key, item) {
                                        errorManagment(item)
                                    });
                                },
                                complete: function () {
                                    setTimeout(function () {
                                        $('#submitUpdate').prop("disabled", false);
                                        $(".loadingSend").hide();
                                        $(".beforeSend").show();
                                    }, 800);
                                }
                            });
                            data = "";
                            // },
                        })

                    }).catch(function (error) {

                    httpMessage(error.response.status).then(message => {
                        errorManagment(message);
                    });
                });
            })

        }```

Answer 1

创建 API.

最简单的方法是创建一个 api。然后，您可以动态更新 API 并发送 HTTP Get（或 POST）请求以读取 api 并基于此更新页面。

您可以在使用任何服务器端语言时执行此操作。您可以创建一个路径（如 /api/detail/get_crud）并在服务器上发送存储在那里的数据。这是最简单的方法，也是最好的方法。

这还可以轻松地重新创建您的网站，它有很多好处。我将在这里列出一些：

轻松改造整个网站
易于使用
你可以发送JSON数据到API（JSON很好用）
你掌控一切

以下是缺点列表：

您必须不断发出 HTTP 请求才能更新网站上的数据

很多网站都这样使用 API。以 https://repl.it 为例。他们有一个api。喜欢这些：

https://replit.com/data/profiles/(username) = 显示(username)的public数据
https://replit.com/data/repls/@(ownerofrepl)/(replname) = 显示 (replname) 的 public 数据。
https://replit.com/graphql

此外，如果我是你，我会使用 fetch。使用起来简单多了。

希望对您有所帮助！（抱歉，如果这不能回答您的问题，我无法完全理解）

Answer 2

每次从 Axios 收到响应时，您都在分配点击事件。在本例中，这些事件附加到 ID 为 submitUpdate 的元素。在将新的点击事件分配给同一元素之前，您可能需要使用 jquery 中的“解除绑定”或“关闭”功能删除该元素的所有现有点击事件。

unbind 在 jquery 的当前版本中已弃用，请改用 off

JavaScript & Ajax 不刷新 CRUD

JavaScript & Ajax without refreshing CRUD

javascript

api

ajax

page-refresh

axios

创建 API.