如何获取后api？

Question

I have an API which returns data from database.

this is my form

            <form action="<c:url value="/getCandidateDetails"/>" method="post">
                <div class="form-group">
                    <label for="masterId">Master Id:</label><br/>
                    <input type="text" id="masterId"
path="studentmasterid" name="studentmasterid" class="form-control">
                    </div>
                    <input type="hidden" value="Pending" name="paymentStatus"/>
                    <button class="btn btn-primary" type="submit" id="search">Search</button>
                </form>

the controller part looks like this.

@RequestMapping(value = "/getCandidateDetails", method = RequestMethod.POST)
public @ResponseBody List<CandidateappearagainstadvtcodeEntity> getCandidateDetails 
(Model model, @RequestParam("studentmasterid") String studentmasterid,

@RequestParam("paymentStatus")String paymentstatus){
    List<CandidateappearagainstadvtcodeEntity> candidates= 
    candidateappearagainstadvtcodeEntityRepository.findByStudentmasteridAndPaymentstatus
    (studentmasterid,paymentstatus);
            return candidates;
        }

it throws json

    [{"id":393,"advertisementcode":"15206-15206/2071-
72","ageonlastdateday":0,"ageonlastdatemonth":0,"ageonlastdateyear":0,
"applicationnumber":"38483928614","attendancestatus":"Pending",
"candidatefirstname":"RAJENDRA","dateofbirthinnepali":null,
"interviewmarksallocationstatus":null,"interviewscheduledstatus":null,
"mothername":"धनराज्य लक्ष्मी पाण्डे",
"candidatenameinnepali":"राजेन्द्रपाण्डे",
"marksobtained":0.0,"optionalpaperid":"NA","panelname":null,
"paymentstatus":"Pending","studentmasterid":"1161"}] 

as you can see my form sends two parameters studentmasterid and payment details. Whenever I click the search button it should hit the api with post method, grab the returned data and view it on jsp page. How can I do it by using ajax?

Answer 1

Your form currently does an HTML POST. Instead you intend to use AJAX. This is how you can do it in jQuery:

HTML

            <form id="myform" action="<c:url value="/getCandidateDetails"/>" method="post">
                <div class="form-group">
                    <label for="masterId">Master Id:</label><br/>
                    <input type="text" id="masterId"
path="studentmasterid" name="studentmasterid" class="form-control">
                    </div>
                    <input type="hidden" value="Pending" name="paymentStatus"/>
                    <button class="btn btn-primary" type="submit" id="search">Search</button>
                </form>

Javascript

$("#myform").submit(function(submitEvent) {
    submitEvent.preventDefault(); //Prevents HTML POST
    var items = $(this).find("[name]"); //Finds all the named items in the form
    //Builds the data object
    var data = {};
    for (var index in items) {
        data[items[index].prop("name")] = items[index].val();
    }
    $.ajax({
        url: $(this).prop("action"),
        data: data,
        method: "POST"
    }).done(function(responseData) {
        //Do something with the response you have received from the server.
    });
});

If you prefer plain Javascript, you can achieve the same with adding an onsubmit handler to the form's Javascript object

<form onsubmit="event.preventDefault(); sendAJAX();">

and you need to define sendAJAX to send your AJAX in plain Javascript.