剑道网格 CRUD 不会在服务器端持续存在答案

【问题标题】：Kendo grid CRUD doesn't persist in the server side剑道网格 CRUD 不会在服务器端持续存在
【发布时间】：2021-09-10 01:39:06
【问题描述】：

create 方法发送“null”值，delete 方法返回 404 not found，put 方法只清除已编辑的字段。（所有方法都在邮递员中工作）。

我不确定 Kendo UI 是如何发送到 API 的，但是我的 create 方法等待 body 中的参数，delete 方法等待 URL 中的 id(localhost:3000/api/comment/32) .我的 put 方法还等待正文中的参数 (JSON)。

我可能做错了什么，但我不知道是什么。

这是代码和屏幕（屏幕来自 post 方法）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="styles/kendo.common.min.css">
    <link rel="stylesheet" href="styles/kendo.default.min.css">
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
    <link rel="stylesheet" href="styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="styles/kendo.silver.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/pako_deflate.min.js"></script>
    <script src="js/jszip.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/daterangepicker.css">

  </head>
  <body>
   
<div id="example">
    <div id="gridComment"></div>
    <script>
        $(document).ready(function () {
            
          var commentDataSource = new kendo.data.DataSource({
            //autoSync : true,
            transport: {
                            read:{
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "get",
                                //contentType: "application/json"
                            },
                            update: {
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "put",
                                //contentType: "application/json"
                            },
                            create: {
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "post",
                            },
                            destroy: {
                                url: "http://localhost:3000/api/comment",
                                dataType: "json",
                                type: "delete",
                                //contentType: "application/json"
                            },
                            
                        },
                        schema:{
                            type: "json",
                            model:{
                                id: "idvatc",
                                fields:{
                                    idvatc: { type: "number", editable : false},
                                    commen: { nullable: true},
                                }   
                            }
                        },
                        batch: true,

          })

             $("#gridComment").kendoGrid({
                    dataSource : commentDataSource,
                    editable: true,
                    confirmation: false,
                    toolbar: ["save", "cancel","create"],
                    columns : [{
                        field : "commen",
                        title : "Comment"
                    },
                    { command: ["edit","destroy"], title: "Actions", width: 200 }
                    ],
                    

                });


        });

        
    </script>

    
</div>


    

</body>
</html>

【问题讨论】：

标签： javascript node.js kendo-ui

【解决方案1】：

好的，我想我明白你的问题了。 Kendo 正在发送application/x-www-url-formencoded 内容类型，我猜您的端点只接受application/json。两种解决方案，要么让您的端点接受x-www-url-formencoded，要么在发送 Ajax 请求之前对其进行预过滤。

没有做过任何 Nodejs 的工作，所以我不能提供指点。但是，如果您的端点是 Java，那么在 Spring 中它只是删除了 @ResponseBody 注释。

下一个选项是预过滤 Ajax 请求。此示例修改 URL，因此这可以在您的 Delete 方法中使用。首先是将您的transport 修改为如下内容：

transport: {
    read: {
        url: url,
        contentType: 'application/json',
        dataType: 'json',
        type: options.httpRequestType,
        beforeSend: beforeSend, // function to call before sending the request
        data: function(data) {
            if (options.httpRequestType === 'POST') {
                return {
                    preFilterMe: true,
                    parameters: options.parameters,
                    page: data.page,
                    itemsPerPage: data.pageSize,
                };
            }

            return {
                page: data.page,
                itemsPerPage: data.pageSize,
            };
        },
    },
},

在上面的例子中，如果请求是一个POST，它会返回更多的数据用于预过滤。

这里我更改 URL 并将 JSON 数据放入正文中，如果它是 POST 并且预过滤器是 true。

$.ajaxPrefilter(function(options, originalOptions, xhr) {
    if (originalOptions.type === 'POST' && 
        originalOptions.data.preFilterMe) {
        
        options.url = options.url + '?page=' + originalOptions.data.page
            + '&itemsPerPage=' + originalOptions.data.itemsPerPage;

        if (originalOptions.data.parameters.length > 0) {
            options.data = JSON.stringify(originalOptions.data.parameters);
        }
    }
});

希望这个示例将引导您找到解决方案。

【讨论】：

嗨@jpllosa，再次感谢您的帮助。回复较晚，抱歉。我在这里（dojo.telerik.com/ecAKIqed）尝试了您的示例，更改了您提供的示例代码。不过，我收到一个错误（问题中的最后一张图片），选项未定义......我也试图在服务器端修复以接受 URL 编码但没有成功。再次感谢您的帮助和耐心。
您的 DOJO 示例完全错误，我怎么可能连接到 localhost:3000。有关beforeSend 和$.ajaxPrefilter 的更多详细信息，请阅读jQuery API。实际上，您可能不需要beforeSend。该示例的重点是您可以从客户端更改 URL，以便后端可以理解它。此外，这个例子正在达到我的终点，而不是你的。你的端点能理解itemsPerPage吗？这只是一个指南，绝对不是针对您的问题的复制粘贴解决方案。
是的，我知道您无法访问我的 localhost:3000。我只是发送道场来展示我在做什么。我将按照您的建议阅读 jquery API 文档。很抱歉给您带来不便，再次感谢您的帮助和耐心。
@Researcher 不用担心。希望这个例子能给你和如何解决你的问题的想法。
是的，感谢您的示例，这对我有所帮助我已经修复了删除操作，因为我的后端等待'/：id'我刚刚执行了以下操作： data){ return url_d + '/' + data.models[0]["idvatc"]; }, dataType: "json", type: "DELETE" }, 当我完成 PUT 和 POST 后，如果有人需要，我会发送到这里。再次非常感谢。