如何使用ajax修复rest调用中添加的参数？_Ajax_Rest_Spring Boot_Datatables

如何使用ajax修复rest调用中添加的参数？

ajax rest spring-boot datatables

如何使用ajax修复rest调用中添加的参数？,ajax,rest,spring-boot,datatables,Ajax,Rest,Spring Boot,Datatables,我正在尝试使用对SpringRestController的ajax Rest调用测试DataTablesComposer。我在wampserver中安装了前端，在后端安装了spring boot 我用弹簧图图来设置RestController 它工作正常，我在调用控制器时得到了Json文件。我想使用resutl并在Datatables中显示字体的代码script.js为： $(document).ready( function () { $('#table_id').D

我正在尝试使用对SpringRestController的ajax Rest调用测试DataTablesComposer。我在wampserver中安装了前端，在后端安装了spring boot

我用弹簧图图来设置RestController 它工作正常，我在调用控制器时得到了Json文件。我想使用resutl并在Datatables中显示

字体的代码script.js为：

    $(document).ready( function () {
        $('#table_id').DataTable( {
                  "processing": true,
                  "serverSide": false,
                  "ajax": {
                      "url": "http://localhost:8080/greeting",
                      "type": 'GET',
                      "dataType": "json",
                      "data": function (data) { 
                         // console.log(data); 
                         return data = JSON.stringify(data);
                      }
                      },

                  "columns": [
                                   {"data": 'id'},
                                   {"data": 'content'}
                               ]
           });
    });

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="script.js"></script>
    <meta charset="UTF-8">

    <title>Gtreetings</title>
</head>
<h3>Hi, little one </h3>
<body>

    <table id="table_id" class="display" style="width:100%">
        <thead>
        <tr>
            <th>id</th>
            <th>content</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <th>id</th>
            <th>content</th>
        </tr>
        </tfoot>
    </table>

</body>
</html>

我得到了一个奇怪的附加参数{}&=1558786054608 以及{}&=1558786054608上的跨源请求错误

我不确定它是否是时间戳，我不知道如何解释这一点。

首先，在您的JS脚本中，ajax调用中有一个错误，数据表示参数不是从ajax发送的。下面是代码的正确版本

     $(document).ready( function () {

        $('#table_id').DataTable({                                                                              
                  processing: true,
                  serverSide: false,
                   dataType: "json",
                   ajax: {
                      url: "http://localhost:8080/greeting",
                      method: 'GET',
                      dataSrc: function (json) {

                         console.log("json",json)
                         return json;
                        },

                    },

                  columns: [
                               {data: 'id'},
                               {data: 'content'}
                           ]
           });
    });

其次，在控制器的后端，您必须添加注释@CrossOriginations=*以避免错误CrossOrigination

最后，Datatable在retune结果中必须有一个数组，而在控制器中则不是这样。它返回一个对象。我建议将对象包装在一个列表中，如下所示：

@CrossOrigin(origins = "*")
@RestController
public class GreetingController {

    private static final String template = "Hello, %s!";
    private final AtomicLong counter = new AtomicLong();

    @RequestMapping("/greeting")
    public List<Greeting> greeting(@RequestParam(value="name", defaultValue="World") String name) {

        List<Greeting> ls = new ArrayList<Greeting>();
        ls.add(new Greeting(counter.incrementAndGet(),
                String.format(template, name)));
        return ls;
    }
}

我希望有帮助