CODEWITHSUNDEEP
javajqueryajaxrestspring-boot
superior
superior

Reputation: 21

Jquery does not work when I request to rest service (spring boot)

I'm working on a spring boot rest api and I want to take information from rest api to a html page. I tried this using jquery but I could not take data.

Here is my Rest Controller

package tr.kasim.Controller;

import java.sql.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import tr.kasim.Service.PersonelService;
import tr.kasim.Service.PtsGirisCikisService;
import tr.kasim.Model.Personel;
import tr.kasim.Model.PtsGiriscikis;

@CrossOrigin("*")
@RestController
public class STRestController {

@Autowired
public PersonelService personelService;

@Autowired
public PtsGirisCikisService ptsGirisCikisService;

@GetMapping("/api/personels")
public ResponseEntity<List<Personel>> getPersonels(){
    List<Personel> personels = personelService.findAll();
    return ResponseEntity.ok().body(personels);
}

@GetMapping("/api/giriscikis")
public ResponseEntity<List<PtsGiriscikis>> getGirisCikis(){
    List<PtsGiriscikis> giriscikis = ptsGirisCikisService.findAll();
    return ResponseEntity.ok().body(giriscikis);
}

//@GetMapping("/api/personel")
@RequestMapping(method=RequestMethod.GET, value="/api/personel", produces="application/json" )
public ResponseEntity<List<PtsGiriscikis>> getPersonelByKartNoAndİseGiris(@RequestParam("kartno") String KartNo , @RequestParam("tarih") Date IseGirisTarihi){
    String errorMessage="Aranilan Personel Bulunamadi!";

    Personel personel = personelService.findPersonelByKartnoAndIsegiristarihi(KartNo , IseGirisTarihi);

    if(!personel.equals(null)) {
        List<PtsGiriscikis> girisCikis = ptsGirisCikisService.findByPersonelid(personel.getId());
        return ResponseEntity.ok().body(girisCikis);
    }

        return null;
}

}

Here is my Controller

package tr.kasim.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class STController {

@GetMapping("/")
public String goHome() {
    return "templates/index";
}
}

Here is index.html page

<!DOCTYPE html>
<html>
<head>
    <title>Hello jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        function findPersonels() {
            $.ajax({
                type:"GET",
                url: "/api/personels",
                contentType: "application/json"
            }).then(function(data) {
                $('.giriscikis-id').append(data.id);
                $('.giriscikis-ad').append(data.ad);
            });
        }
    </script>
</head>

<body>
    <div>

        <p class="giriscikis-id">The ID is </p>
        <p class="giriscikis-ad">The name is </p>
        <input type="button" id="doldur" name="doldur" value="field doldur" onclick="findPersonels();">
    </div>
</body>

I tried many jquery + spring application examples but I still got nothing. When I tried to reach index.html I just saw my html writings, rest service information are not showing. Please correct me, thank you.

Upvotes: 0

Views: 719

Answers (1)

cmoetzing
cmoetzing

Reputation: 792

With the limited information:

  1. I guess your mapping from path to template is wrong. Shouldn't it be like this?

    @GetMapping("/") public String goHome() { return "templates/index"; }

  2. An Uncaught ReferenceError indicates that your method is not found. Please verify the spelling (looks fine in your example, please check again in your code). In your example the braces of findPersonels are totally messed up. There is too many ). If that is corrected check in your browser console that there is no http404 when loading the page (so that js/personels.js is found).

  3. Your endpoint /api/personels defines a list as return type but your script uses the properties data.ad and data.id which do not look like they expect a list. The returned json probably looks something like this { items: [ { 'ad': 'first personel' 'id': '1' }, { 'ad': 'second personel' 'id': '2' } ] } The structure depends on your JSON marshaller. So a correct syntax for accessing your object in JS would be somehting like data.items[0].id.

Upvotes: 2

Related Questions