Question

我正在尝试使用对spring RestController的ajax Rest调用来测试Datatables作曲家。我在wampserver中设置正面，并在春季启动中设置背面。

我正在使用Spring Tuto设置RestController https://spring.io/guides/gs/rest-service/ 它工作正常，我在调用控制器时得到了Json文件。我想使用该结果并显示在数据表中。

字体的代码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 和http://localhost:8080/greeting上的跨域请求错误？{}＆ = 1558786054608。

我不确定这是否是时间戳，我不知道该如何改写。

Answer 1

首先，在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'}
                           ]
           });
    });

第二，您必须在控制器的后端中添加注释@CrossOrigin(origins = "*")，从而避免了跨域错误。

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

@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;
    }
}

希望对您有帮助。

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

1 个答案: