【问题标题】：JavaScript & Ajax without refreshing CRUD无需刷新 CRUD 的 JavaScript 和 Ajax
【发布时间】：2021-07-02 16:55:15
【问题描述】：

我对 JavaScript 有疑问。我想在不刷新页面的情况下创建 CRUD。我可以创建、读取和删除项目。但是当我更新项目时它会出现问题。当单击表 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);
                    });
                });
            })

        }```

【问题讨论】：

标签： javascript ajax api axios page-refresh

【解决方案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) 的公开数据
https://replit.com/data/repls/@(ownerofrepl)/(replname) = 显示(replname) 的公开数据。
https://replit.com/graphql

另外，如果我是你，我会使用fetch。它更容易使用。

希望这会有所帮助！（对不起，如果这不能回答你的问题，我不能完全理解它）

【讨论】：

【解决方案2】：

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

在当前版本的 jquery 中不推荐使用 unbind，请改用 off

【讨论】：