CODEWITHSUNDEEP
ajaxrestspring-bootdatatables
ninja007
ninja007

Reputation: 53

How to fix added parameter in rest call with ajax?

I'm trying to test Datatables composer with ajax Rest calls to spring RestController. I setup front in wampserver and the back with spring boot.

I'm using the spring tuto to setup the RestController https://spring.io/guides/gs/rest-service/ It works fine, I got Json file while calling the controller. I want to using that resutl and show in Datatables.

The code script.js of the font is : 

    $(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 page

<!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>

I got a weird added parameter {}&=1558786054608 and Cross-Origin Request error on http://localhost:8080/greeting?{}&=1558786054608.

I'm not sure if it is a timestamp, I don't know how to explane this.

Upvotes: 0

Views: 98

Answers (1)

azdoud
azdoud

Reputation: 1229

First, in your JS script, you have an error in the ajax call, the data means the parameter send not from ajax. here is a correct version of the code.

     $(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'}
                           ]
           });
    });

Second, in the backend on the controller you have to add annotation @CrossOrigin(origins = "*") thus you avoid the error cross-origin.

Finally, Datatable has to have an array in the retune result, and it is not the case in your controller. It returns an object. I suggest to wrap your object within a list as follows :

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

I hope it helps.

Upvotes: 2

Related Questions